Question

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

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

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

如何使用我的脚本修复此问题？

这是我的代码：

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

Answer 1

您的代码正在触发多个滚动事件，直到滚动操作未停止，因此您需要做的是仅在滚动操作完全停止时触发目标事件处理程序，这是通过一种称为去抖动逻辑的技术完成的。功能去抖（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＆amp;＆amp; ！超时; clearTimeout（超时）; timeout = setTimeout（稍后，等待）; if（callNow）func.apply（context，args）; }; }; //通过传递目标事件处理程序来调用debounce逻辑 var optimisedFunc = debounce（function（）{ var currentScrollTop = $（this）.scrollTop（）; if（currentScrollTop＆gt; lastScrollTop）{ $（＆＃34; .header＆＃34）。淡出（）; } else { $（＆＃34; .header＆＃34）。淡入（）; } lastScrollTop = currentScrollTop; }，250）; $（窗口）.scroll（函数（）{ optimisedFunc（）; }）; 上述去抖动逻辑不仅仅是延迟执行，更多信息请参考。

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

1 个答案: