Question

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

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

向下滚动页面后，Bootstrap 4不会将类添加到附加的导航栏。谁能告诉我如何解决这个问题？ 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

From the bootstrap v4 documentation:

删除了 Affix jQuery插件。我们建议您改用position: sticky polyfill。 See the HTML5 Please entry了解详细信息和特定的polyfill建议。


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

Answer 3

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

以Anwar Hussain的答案为基础。我找到了成功：

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

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

Answer 5

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

将.js ScrollPos-Styler（scrollPosStyler.js）文件包含在您的信息页中。
找到您想要制作的“粘性”的相关<div>

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

申请sps sps--abv课程

<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 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

在尝试了我能找到的每个解决方案之后（并且知道从引导程序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

在引导程序4中简单使用固定顶部类，并使用addClass和removeClass

net::ERR_TOO_MANY_RETRIES

Answer 10

bootstrap 4有一个特殊的类。尝试删除data-spy="affix" data-offset-top="90"属性，然后仅添加'sticky-top'。

documentation

Affix在Bootstrap 4（alpha）中不起作用

10 个答案: