jQuery移动粘滞头

Question

我有一个jQuery移动标头div (data-role="header" data-position="fixed")其中两个工具栏的布局如下：

_____________________
|XXXXXXXXXXXXXXXXXXX|
|YYYYYYYYYYYYYYYYYYY|

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

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

它有效，但是，仅在首次加载页面或使用具有rel=external.的链接访问该页面时才有效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;
}

Answer 1

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

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

拉蒙