Affix在Bootstrap 4(alpha)中不起作用

Question

根据Bootstrap 3文档,我将以下属性添加到导航栏:

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

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

Answer 1

虽然在版本4中从引导程序中删除了词缀.但是,您可以通过此jQuery代码实现目标:

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

Answer 2

更新Bootstrap 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

Answer 3

从bootstrap v4文档:

删掉了Affix jQuery插件.我们建议使用position: stickypolyfill.有关详细信息和特定的polyfill建议,请参阅HTML5 Please条目.

如果您使用Affix应用其他非position样式,则polyfill可能不支持您的用例.此类用途的一个选项是第三方ScrollPos-Styler库.