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

Question

I am trying to get a sticky header to work like when I scroll down, the header will disappear and when I start to scroll up the header will reappear.

This is my 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;
}

I am trying to make it add and remove classes from this div:

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

As you can see, I'm trying to get the div by selecting the class. I've tried finding it with id but with no result.

Thanks in advance!

Answer 1

You are searching for $('.header-top') but your element has class header__top so use $('.header__top')

Also, what is $(this) in your function? Maybe this should be $(window) or something else. Try and alert your variable after getting scrolltop to see if it actually has a value.