导航栏上显示/隐藏像脉冲淡出效果

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获得更多信息。