javascript - 滚动回到顶部后显示div

当用户滚动回到网站顶部时，我想显示一个顶部栏。

所以例如用户向下滚动至少300-400像素，然后当他再次向上滚动至大约100像素（从网站左侧到顶部）时，该栏应切换/显示。

谢谢你的帮助！ :)

最佳答案

您可以将事件侦听器添加到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);
    };
});