词缀在 Bootstrap 4（alpha）中不起作用

Question

根据 Bootstrap 3 文档，我向导航栏添加了以下属性：

 <nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" >
...
</nav>

向下滚动页面后，Bootstrap 4 不会向附加的导航栏添加类。谁能告诉我如何解决这个问题？ Bootstrap.js 和 jQuery.js 正在运行。

原文由 Ilyas karim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然该词缀在版本 4 中从 Bootstrap 中移除。但是，您可以通过这段 jQuery 代码实现您的目标：

 $(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue == settings.scrollTopPx || scrollValue > 70) {
         $('.navbar').addClass('fixed-top');
    }
});

原文由 Anwar Hussain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

更新引导程序 4

文档推荐粘性 polyfill，推荐的 ScrollPos-Styler 对滚动位置没有真正帮助（您可以轻松定义偏移量）。

我认为使用 jQuery 观察窗口滚动并相应地将 CSS 更改为固定 更容易…

   var toggleAffix = function(affixElement, wrapper, scrollElement) {

    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;

    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }

  };

  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');

    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, wrapper, $(this));
    });

    // init
    toggleAffix(ele, wrapper, $(window));
  });

Bootstrap 4 词缀（粘性导航栏）

编辑： 另一种解决方案是使用 3.x Affix 插件的这个端口 作为 Bootstrap 4 中的替代品。

http://www.codeply.com/go/HmY7DLHLkI

---

相关： 使用 Bootstrap 4 在滚动时动画/缩小 NavBar

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议