Question

当用户滚动回网站顶部时，我想显示一个Top-Bar。

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

感谢您的帮助！：）

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);
    };
});

滚动回顶部后显示div

1 个答案: