javascript - 查询。滚动条上的粘性页眉。停止对每个卷轴的影响

Question

我目前正在使用此代码段使我的页面标题在用户滚动超过一定距离时“具有粘性”；

$(window).scroll(function() {

var headerheight = $("header").height();
var header = $(document).scrollTop();

if (header > height-75 ) {
    $('header').addClass('sticky');
    $('body').css("padding-top", headerheight);
    $('.sticky').css('top', 0);
} else {
    $('header').removeClass('sticky');
    $('body').css("padding-top", 0);
    $('header').css('top', 25);
}

唯一的问题是 .sticky 类被应用于每次滚动超过指定距离时，当我想对其应用缓动效果时，这会给我带来问题。所以基本上我想要的是 .sticky 类在页面滚动超过某个点时应用一次。我怎样才能用当前的代码实现它？还是我必须从头开始？

Answer 1

只需检查该类是否存在:

if (header > height-75 ) {
    if ( !$('header').hasClass('sticky') ){
        $('header').addClass('sticky');
        $('body').css("padding-top", headerheight);
        $('.sticky').css('top', 0);
    }
} else {
    if ( $('header').hasClass('sticky') ){
        $('header').removeClass('sticky');
        $('body').css("padding-top", 0);
        $('header').css('top', 25);
    }
}