Question

这是我目前的代码：http://jsfiddle.net/spadez/9sLGe/3/

我担心这样做会非常迟钝，因为它正在监视scroll。我在另一个问题上看到提及有点像这样：

var scrollTimeout,
    callback = function () {  
        /// Do your things here
    };

$(window).scroll(function () {

    if (scrollTimeout)
        clearTimeout(scrollTimeout);

    scrollTimeout = setTimeout(callback, 40);

});

任何人都可以告诉我这是不是一个好主意以及如何将其整合。

詹姆斯

Answer 1

主要问题不是快速触发事件（尽管去抖动肯定会有所帮助，但代价是略微缺乏响应性/即时性），但更多的是你正在改变CSS属性每一个事件发生。

你应该考虑使用像“isStickified”这样的标志，并使用你的if条件来改变那个标志。当且仅当标志更改时，就应该将CSS设置为更新。这会更有效率。

Answer 2

为了获得平滑的结果，我会坚持每次滚动事件。否则在粘贴或不粘之前会有延迟。

但是，您可以通过缓存jQuery集合来提高函数的性能，并且只在需要时才粘贴/取消粘贴。

以下是使用您的代码的简单示例模块：http://jsfiddle.net/9sLGe/9/

(function() {
  var $select = $('#select');
  var $window = $(window);
  var isFixed = false;
  var init = $('#select').offset().top;

  $window.scroll(function() {
    var currentScrollTop = $window.scrollTop();
    if (currentScrollTop > init && isFixed === false) {
      isFixed = true;
      $select.css({
        top: 0,
        position: 'fixed'
      });
      console.log("fixed");
    } else if (currentScrollTop <= init && isFixed === true) {
      isFixed = false;
      $select.css('position', 'relative');
      console.log("unfixed");
    }
  });
}());

减少滚动事件的延迟

2 个答案: