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

Question

根据 Bootstrap 3 个文档，我已将以下属性添加到导航栏：

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

向下滚动页面后 Bootstrap 4 没有将 class 添加到词缀的导航栏。谁能告诉我如何解决这个问题？ Bootstrap.js 和 jQuery.js 正在工作。

Answer 1

From the bootstrap v4 documentation:

Dropped the Affix jQuery plugin. We recommend using a position: sticky polyfill instead. See the HTML5 Please entry for details and specific polyfill recommendations.

If you were using Affix to apply additional, non-position styles, the polyfills might not support your use case. One option for such uses is the third-party ScrollPos-Styler library.

Answer 2

虽然这个词缀在版本4的Bootstrap中被去掉了。但是，你可以通过这个jQuery代码来达到你的目的：

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

Answer 3

更新Bootstrap4

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

我认为 更容易 使用 jQuery 观看 window 滚动并将 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 affix (sticky navbar)

编辑： 另一种解决方案是使用此 port of the 3.x Affix plugin 作为 Bootstrap 4..

中的替代品

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

相关：Animate/Shrink NavBar on scroll using Bootstrap 4

Answer 4

根据 Vucko 在 Mirgation 文档中的引述，ScrollPos-Styler 库非常适合我。

将 .js ScrollPos-Styler (scrollPosStyler.js) 文件添加到您的页面。
找到您想要制作的相关 <div> 'sticky'

<nav class="navbar navbar-toggleable-md">

应用sps sps--abvclass

<nav class="navbar navbar-toggleable-md sps sps--abv">

添加 .css 您希望在元素变得粘滞后触发的样式（根据 demo page.

/** 
 * 'Shared Styles' 
**/
.sps {

}

/** 
 * 'Sticky Above' 
 *
 * Styles you wish to apply
 * Once stick has not yet been applied
**/
.sps--abv {
   padding: 10px
}

/** 
 * 'Sticky Below' 
 *
 * Styles you wish to apply
*  Once stick has been applied
**/
.sps--blw {
   padding: 2px
}

Answer 5

以 Anwar Hussain 的回答为基础。我发现成功了：

$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue > 120) {
        $('.navbar').addClass('affix');
    } else{
        $('.navbar').removeClass('affix');
    }
});

这会在向下滚动时将 class 应用于导航栏，但也会在向上滚动时移除 class。以前，向上滚动时，应用的 class 将保持应用于导航栏。

Answer 6

$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    var offset = $('[data-spy="affix"]').attr('data-offset-top');
    if (scrollValue > offset) {
        $('[data-spy="affix"]').addClass('affix-top');
        var width = $('[data-spy="affix"]').parent().width();
        $('.affix-top').css('width', width);
    } else{
        $('[data-spy="affix"]').removeClass('affix-top');
    }
});

Answer 7

在尝试了我能找到的所有解决方案后（并意识到词缀已从 bootstrap 4 中删除），我获得所需粘性结果的唯一方法是使用 sticky-kit。

这是一个非常简单的 jQuery 插件，易于设置。

只需将代码包含在您的项目中，然后分配您想要坚持使用的元素

$("#sidebar").stick_in_parent();

Answer 8

对于正在寻找纯 Javascript 答案的用户，这就是使用纯 Javascript:

的方法

window.onscroll = (e) => {
    let scrollValue = window.scrollY;
    if (scrollValue > 120) {
        document.querySelector('.navbar').classList.add('affix');
    } else{
        document.querySelector('.navbar').classList.remove('affix');
    }
}

Answer 9

简单使用 class fixed-top in bootstrap 4 并使用 addClass 和 removeClass

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

Answer 10

对于 bootstrap 4 有特殊的 class。尝试删除 data-spy="affix" data-offset-top="90" 属性，然后只添加 'sticky-top'.

documentation

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

Affix is not working in Bootstrap 4 (alpha)

javascript

css

twitter-bootstrap

affix

bootstrap-4