Question

我正在为bootstrap开发一个简单的sticky-plugin插件。基本上，它的工作原理如下：

    if ( $(this).scrollTop() < ScrollPastOffset ) {
        console.log("max it");
        $(fixedAlertWrappers).removeClass('scroll');
    } else {
        console.log('min it');
        $(fixedAlertWrappers).addClass('scroll');
    }

但是当您尝试滚动警报时，会导致故障，并且不会让您向下滚动超过您在ScrollPastOffset中设置的值。在这里演示：https://jsfiddle.net/09kh5rp9/

Answer 1

当内容高度增加时，您的变量ScrollPastOffset需要更改

var topDist = $("a.btn").position();
if (scroll > topDist.top){
    console.log("max it");
    $(fixedAlertWrappers).removeClass('scroll');
}
else {
    console.log('min it');
    $(fixedAlertWrappers).addClass('scroll');
}

在您的情况下，您只需编辑此变量，其余代码相同

var ScrollPastOffset = $("a.btn").position().top;

这是一个有效的pen

Answer 2

简单的解决方案：

$(window).scroll(function() {
    var elm = $('.fixed-alert-wrapper');
    if ( $(this).scrollTop() < 150 ) {
        if ( elm.hasClass('scroll') )
            elm.removeClass('scroll');
    } else {
        if ( !elm.hasClass('scroll') )
            elm.addClass('scroll');
    }
});

Bootstrap粘性（固定）警报可防止向下滚动

2 个答案: