Question

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

这是我的代码：

$(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 else块或三元运算符和某些内部if可以替换为＆amp;＆amp; 。我希望你可以使用代码优化调整。

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

1 个答案: