当用户向上滚动到某个点时向元素添加 class

Question

所以我使用 jQuery 创建了一个粘性 header，当用户滚动经过它时，它会向 header 添加一个 class。但是，我想知道当用户向上滚动并到达页面顶部之前 50px 时，如何将另一个 class 添加到 header？但是，我只想在用户向上滚动而不是向下滚动时将此 class 添加到 header，并且我希望它在用户到达页面顶部时删除。

这是我的代码：

$(window).scroll(function () {
    if( $(window).scrollTop() > $('#header').offset().top && !($('#header').hasClass('sticky-header'))){
            $('#header').addClass('sticky-header');
        } else if ($(window).scrollTop() == 0){
            $('#header').removeClass('sticky-header');
            }
    });

Answer 1

试试这个：

var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if( $(window).scrollTop() > $('#header').offset().top && !($('#header').hasClass('sticky-header'))){
    $('#header').addClass('sticky-header');
}
//this is when user scrolls down: hide the class after 500
if (st > lastScrollTop) {
    if ( $(window).scrollTop() > 500){
    $('#header').removeClass('another-sticky-header');
    }
}
//this is when user scrools up: before 500 add class
if (st < lastScrollTop) {
    //here 500 is used to make the effect last longer you can make it 50 as you wish to do in OP
    if ( $(window).scrollTop() < 500){
        $('#header').addClass('another-sticky-header');
    }
}
if ($(window).scrollTop() == 0){
    $('#header').removeClass('sticky-header');
    $('#header').removeClass('another-sticky-header');
}

lastScrollTop = st;
});

注意：这段代码可以优化得更多，确定if可以用if else块或三元运算符替换，某些内部if可以用&&替换。我希望您可以使用该代码优化调整。

当用户向上滚动到某个点时向元素添加 class

Add class to element when user scrolls up to certain point

html

javascript

css

jquery

header