导航栏显示/隐藏滚动，如脉冲淡入淡出效果

Question

我的 JS 脚本有问题，它在向下滚动时隐藏我的导航栏并在向上滚动时显示它。

问题是导航栏在向上滚动时一次又一次地显示和隐藏，而向下滚动时也是如此。

此外，当我向上滚动到页面顶部时，导航栏隐藏在顶部。

如何用我的脚本解决这个问题？

这是我的代码：

var lastScrollTop = 0;
$(window).scroll(function() {
    var currentScrollTop = $(this).scrollTop();
    if (currentScrollTop > lastScrollTop) {
        $(".header").fadeOut();
    } else {
        $(".header").fadeIn();
    }
    lastScrollTop = currentScrollTop;
});

Answer 1

您的代码会触发多个滚动事件，直到滚动操作未停止，因此您需要做的是仅在滚动操作完全停止时触发目标事件处理程序，这是通过称为 的技术完成的去抖逻辑。

function debounce(func, wait, immediate) {
var timeout;
return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
 };
};

// call debounce logic by passing target event handler
var optimisedFunc= debounce(function() {
   var currentScrollTop = $(this).scrollTop();
   if (currentScrollTop > lastScrollTop) {
      $(".header").fadeOut();
   } else {
      $(".header").fadeIn();
   }
   lastScrollTop = currentScrollTop;
}, 250);

$(window).scroll(function(){
      optimisedFunc();
});

上述去抖动逻辑不仅仅延迟执行，更多信息请参考this。