我想在用户滚动回到网站顶部时显示一个顶部栏。
例如用户向下滚动至少 300-400 像素,然后当他再次向上滚动到大约 100 像素(左侧到网站顶部)时,栏应该切换/显示。
感谢您的帮助! :)
最佳答案
您可以将事件监听器添加到 document
以检查用户何时向下滚动页面。一旦他们遇到预设断点,您可以从导航栏元素中删除一个隐藏
类,如下所示:
var breakpoint = 400;
var navbar = $('.nav-bar');
$(document).scroll(function(){
if($(this).scrollTop() >= breakpoint) {
navbar.removeClass('hidden', 500);
}
});
如果您的导航栏是固定的,您还可以检查一个 bool 变量以查看用户是否滚动过断点,然后将其设置为 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);
};
});
关于javascript - 滚动回到顶部后显示div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34970893/