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);
    }
}

jQuery的。滚动上的粘滞标题。停止每个滚动的效果

1 个答案: