Bootstrap 词缀的 unaffix 事件？答案

【问题标题】：unaffix event for Bootstrap affix?Bootstrap 词缀的 unaffix 事件？
【发布时间】：2014-04-06 20:50:13
【问题描述】：

我想将词缀插件与 bootstrap navbar-fixed-top 类结合起来。到目前为止，我已经让它工作了，然后当我滚动浏览导航栏时，它就会被修复。但是当我向上滚动时，我希望它再次回到静态状态。我从旧的引导程序版本和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' );
} );

【问题讨论】：

标签： jquery twitter-bootstrap events twitter-bootstrap-3 jquery-events

【解决方案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 => 固定定位应用于元素之前
affixed.bs.affix => 固定定位应用于元素之后
affix-top.bs.affix => 在顶部元素返回其原始（非固定）位置之前
affixed-top.bs.affix => 在顶部元素返回其原始（非固定）位置之后
affix-bottom.bs.affix => 在底部元素返回其原始（非固定）位置之前affixed-bottom.bs.affix => 在底部元素返回其原始（非固定）位置后

【讨论】：

我遇到了同样的问题，我发现两个事件同时触发，因为名称非常混乱。我几乎错过了这样一个事实，即在你的 unaffix 中你使用了 affixed-top.，而不是仅仅 affixed.，我正在尝试 affixed.bs.affix。谢谢你，我同意，它有效。
函数offset: 中的bottom: 值不是应该触发从词缀到词缀底部，并且类的添加和删除会由引导程序自动处理吗？
+1 确实有效。 BS 文档说 affixed-top.bs.affix: This event is fired after the element has been affixed-top. 不知道这意味着什么。

【解决方案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 像素开始并在您想要的滚动点处停止。

【讨论】：