Javascript 词缀在 Bootstrap 4 (alpha) 中不起作用

Affix is not working in Bootstrap 4 (alpha)

提问by Ilyas karim

According to Bootstrap 3 docs I have added following attributes to a navbar:

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

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

After scrolling down the page Bootstrap 4 is not adding class to navbar which is affix. Can anyone tell me how to solve this problem? Bootstrap.js and jQuery.js are working.

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

回答by Anwar Hussain

Although the affix is removed from Bootstrap in version 4. However, you can achieve your goal through this jQuery Code:

尽管在版本 4 中从 Bootstrap 中删除了词缀。但是，您可以通过以下 jQuery 代码实现您的目标：

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

回答by Zim

Update Bootstrap 4

更新引导程序 4

The docs recommend the sticky polyfill, and the recommended ScrollPos-Styler doesn't really help with scroll position (you can easily define an offset).

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

I think it's easierto use jQuery to watch the window scroll and change the CSS accordingly to fixed...

我认为使用 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 affix (sticky navbar)

Bootstrap 4 词缀（粘性导航栏）

EDIT:Another solution is to use this port of the 3.x Affix pluginas a replacement in Bootstrap 4..

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

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

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

---

---

Related: Animate/Shrink NavBar on scroll using Bootstrap 4

相关：使用 Bootstrap 4 滚动动画/缩小导航栏

回答by Vucko

From the bootstrap v4 documentation:

来自 bootstrap v4 文档：

Droppedthe Affix jQuery plugin. We recommend using a position: stickypolyfill instead. See the HTML5 Please entryfor details and specific polyfill recommendations.

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

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

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

回答by Kyle Higginson

To build on Anwar Hussain's answer. I found success with this:

以安瓦尔侯赛因的回答为基础。我发现成功：

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

This will apply the class to the navbar when scrolling down, but will also remove the class when scrolling back up. Previously, when scrolling back up, the applied class would stay applied to the navbar.

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

回答by MackieeE

As per Vucko's quote within the Mirgation docs, ScrollPos-Stylerlibrary suited me quite well.

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

1. Include the .js ScrollPos-Styler(scrollPosStyler.js) file to your page.
2. Find the relevant <div>you wish to make 'sticky'

1. 将.js ScrollPos-Styler( scrollPosStyler.js) 文件包含到您的页面中。
2. 找到<div>您希望“粘性”的相关内容

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

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

1. Apply sps sps--abvclass

3. 申请sps sps--abv班级

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

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

1. Add .cssstyles you wish to have triggered once the element has become sticky (As per the demo page.

4. 添加.css您希望在元素变得粘性后触发的样式（根据演示页面.

---

---

/** 
 * '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
}

回答by TranDuc

$(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');
    }
}); 

回答by DazBaldwin

After trying every solution I could find (and being aware that affix was removed from bootstrap 4), the only way I could get the desired sticky results I needed was to use sticky-kit.

在尝试了我能找到的所有解决方案（并且知道从引导程序 4 中删除了词缀）之后，我可以获得所需的粘性结果的唯一方法是使用sticky-kit。

This is s really simple jQuery plugin that was easy to set-up.

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

Just include the code in your project and then assign the element you want to stick with

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

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

回答by Ilyas karim

For the users who are looking for an answer in pure Javascript, this is how you can do it by using pure Javascript:

对于正在寻找纯 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');
    }
}

回答by Vahid Alvandi

simple use class fixed-top in bootstrap 4 and use addClass and removeClass

简单地在引导程序 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');
    }
});

回答by d.popov

With bootstrap 4 there is special class for that. Try removing the data-spy="affix" data-offset-top="90"attributes, and just add 'sticky-top'.

Bootstrap 4 有专门的类。尝试删除data-spy="affix" data-offset-top="90"属性，然后添加“sticky-top”。

documentation

文件