0

我有一个 jquery 移动标题div (data-role="header" data-position="fixed")，里面有两个工具栏，布局如下：

_____________________
|XXXXXXXXXXXXXXXXXXX|
|YYYYYYYYYYYYYYYYYYY|

我想重现 WhatsApp 的效果，向下滚动隐藏工具栏XXXXXXXX，向上滚动显示工具栏XXXXXXXXXX。工具栏YYYYYY始终可见。

通过使用window.onscroll它可以通过top:-50px;在向下滚动/向上滚动时添加/删除一个类来实现。

它有效，但是，它仅在第一次加载页面或通过具有链接的链接到达时才有效。rel=external.在所有其他情况下，无法看到添加的类的效果。我也试过.addClass("sticky").enhanceWithin()没有效果。

有什么建议可以让它每次都起作用吗？

这里的代码：

var didScroll = false;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = 20;

$(document).on("scroll", function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var currentScroll = $(this).scrollTop();

    if(currentScroll >= 200) {
        $("#scrollToTop").show();
    } else {
        $("#scrollToTop").hide();
    }

    if(Math.abs(lastScrollTop - currentScroll) <= delta)
        return;

    if (currentScroll > lastScrollTop && currentScroll > navbarHeight){
        $('#PageHeader').removeClass('nav-down').addClass('sticky');
    } else {
        if(currentScroll + $(window).height() < $(document).height()) {
            $('#PageHeader').removeClass('sticky').addClass('nav-down');
        }
    }

    lastScrollTop = currentScroll;
}
4

1 回答 1

0

我希望我的小提琴能帮助你：

[http://jsfiddle.net/Lfve19u0/]

拉蒙。

于 2018-10-14T22:05:08.967 回答