導航欄上顯示/隱藏像脈衝淡出效果

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