Question

我想将affix插件与bootstrap navbar-fixed-top类结合起来。到目前为止，我已经使它工作，然后当我滚动浏览导航栏时，它得到修复。但当我向上滚动时，我希望它再次回到静态。我从较旧的bootstrap版本和unaffix事件中看到了一些代码。为什么会消失？我可以创建一个吗？或者如何完成我在这里尝试的内容？

navbar_secondary = $( '.navbar-secondary:first' );

navbar_secondary.affix( {
    offset: {
        top: function () {
            return (this.top = navbar_secondary.offset().top )
        }
    }
} );

navbar_secondary.on( 'affix.bs.affix', function () { // this is actually the wrong event for this. I want this to fire when its *not* affixed
    console.log('affix');
    navbar_secondary.removeClass( 'navbar-fixed-top' ).addClass( 'navbar-not-fixed' );
} );

navbar_secondary.on( 'affixed.bs.affix', function () {
    console.log('affixed');
    navbar_secondary.removeClass( 'navbar-not-fixed' ).addClass( 'navbar-fixed-top' );
} );

Answer 1

自己想出来。这个事件名称完全令人困惑。 affixed-top.bs.affix实际上是它回到没有贴上的事件。

navbar_secondary = $( '.navbar-secondary:first' );

navbar_secondary.affix( {
    offset: {
        top: function () {
            return (this.top = navbar_secondary.offset().top )
        }
    }
} );

navbar_secondary.on( 'affixed-top.bs.affix', function () {
    console.log('unaff');
    navbar_secondary.removeClass( 'navbar-fixed-top' ).addClass( 'navbar-not-fixed' );
} );

navbar_secondary.on( 'affix.bs.affix', function () {
    console.log('aff');
    navbar_secondary.removeClass( 'navbar-not-fixed' ).addClass( 'navbar-fixed-top' );
} );

摘要

affix.bs.affix =＆gt;在固定定位应用于元素之前    affixed.bs.affix =＆gt;固定定位后应用于元件
   affix-top.bs.affix =＆gt;在顶部元素返回其原始（非固定）位置之前    affixed-top.bs.affix =＆gt;顶部元素返回其原始（非固定）位置后    affix-bottom.bs.affix =＆gt;在底部元件返回其原始（非固定）位置之前    affixed-bottom.bs.affix =＆gt;底部元素返回其原始（非固定）位置后

Answer 2

Ahnbizcad，我发现底部偏移不会像那样工作。如果你需要像redanimalwar那样处理unaffix事件，我建议明确地为每个阶段设置CSS定位。例如：

    ul.affix {
      position: fixed; 
      top: 100px;
    }
    ul.affix-top {
      position: static;
    }
    ul.affix-bottom {
      position: absolute;
    }

然后你可以像这样定义offset-bottom函数的值：

    <ul class="list-group navbar_secondary" id="affix-nav" data-spy="affix" data-offset-top="500" data-offset-bottom="-4620">

因此，该功能将启动500像素并停在所需的滚动点。

Bootstrap词缀的unaffix事件？

2 个答案:

摘要