Question

我试图让一个粘性标题工作，就像当我向下滚动时，标题将消失，当我开始向上滚动时，标题将重新出现。

这是我的jQuery：

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $(".header-top").outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

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

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

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $(".header-top").removeClass("sticky-header--top").addClass("sticky-header--hidden");
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $(".header-top").removeClass("sticky-header--hidden").addClass("sticky-header--fixed");
        }
    }

    lastScrollTop = st;
}

我正在尝试添加和删除此div中的类：

<div class="header__top sticky-header sticky-header--top" sticky-header="">

正如你所看到的，我正试图通过选择班级来获得div。我已经尝试用id但没有结果找到它。

提前致谢！

Answer 1

您正在搜索$('.header-top')但您的元素已上课header__top，请使用$('.header__top')

另外，你职能中$(this)是什么？也许这应该是$(window)或其他。获取scrolltop后尝试并提醒您的变量，看看它是否确实有值。

如何使这个Sticky Header jQuery标头工作？

1 个答案: