javascript - jQuery移动粘滞头

我有一个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;
}

最佳答案

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

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

拉蒙