在滾動回頂端後顯示div

Question

我想在用戶滾動回站點頂部時顯示頂部欄。

因此，例如，用戶向下滾動至少300-400像素，然後當他再次滾動到大約100像素（離開站點的頂部）時，欄應該切換/顯示。

感謝您的幫助！ :)

Answer 1

您可以將事件偵聽器添加到document以檢查用戶何時向下滾動頁面。一旦他們打了一個預置斷點，您可以從導航欄元素刪除hidden類，像這樣：

var breakpoint = 400; 
var navbar = $('.nav-bar'); 
$(document).scroll(function(){ 
    if($(this).scrollTop() >= breakpoint) { 
     navbar.removeClass('hidden', 500); 
    } 
}); 

如果你的導航欄是固定的，你也可以檢查一個布爾變量來查看用戶是否已經滾過了斷點，然後將其設置爲true。如果他們向上滾動過斷點，則可以顯示導航欄，如下所示：

var breakpoint = 400; 
var scrolledPastBreakpoint = false; 
var navbar = $('.nav-bar'); 
$(document).scroll(function(){ 
    if($(this).scrollTop() >= breakpoint) { 
     scrolledPastBreakpoint = true; 
    }; 
    if($(this).scrollTop() < breakpoint && scrolledPastBreakpoint) { 
     navbar.removeClass('hidden', 500); 
    }; 
});