在滚动回顶端后显示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); 
    }; 
});