Bootstrap 4（alpha版）中的Affix无法使用

Question

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

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

在向下滚动页面后，Bootstrap 4没有将'affix'类添加到导航栏中。有人能告诉我如何解决这个问题吗？Bootstrap.js和jQuery.js是可以工作的。

- Ilyas karim

---

你有读过Bootstrap 4的文档吗？如果你有，并且在Bootstrap 4的文档中有明确说明，你可以在这里创建一个问题。 - Jamie

@jamie 你的意思是 affix 插件被删除了吗？ - Ilyas karim

@Jamie，如果我们不使用词缀，那么我们如何实现像词缀一样的功能呢？ - Ilyas karim

请参考@vucko的答案。我甚至没有查看文档或使用Bootstrap 4……只是提醒您一种方法。有关详细信息，请参见Vucko的答案。 - Jamie

我刚刚浪费了整整一个小时，试图弄清楚为什么词缀不起作用... 原来我要处理的页面使用的是 Bootstrap v4 而不是 v3... 从现在开始，我将始终检查页面是否使用“标准”版本，而不是一些“最新的新功能” :) - b4rtekb

Answer 1

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

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

- Anwar Hussain

---

我假设 $('.navbar').addClass('navbar'); 应该改为 $('.navbar').addClass('fixed-top');？否则我看不出添加一个已经存在的类会有什么影响。请注意，不要改变原意。 - Tieson T.

Answer 2

更新Bootstrap 4

文档建议使用sticky 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）

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

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

---

相关问题：如何使用Bootstrap 4在滚动时缩小导航栏

- Zim

---

这个完美地运行了，谢谢。它也可以与滚动监听一起使用。 - jcwhall

Answer 3

来自Bootstrap v4文档：

移除了 Affix jQuery插件。我们建议使用一个position: sticky的polyfill替代。 请参阅HTML5 Please条目中的详细信息和特定的polyfill推荐。

如果您使用Affix应用其他非position样式，那么这些polyfills可能不支持您的用例。 这种情况下可选择第三方ScrollPos-Styler库。

- Vucko

---

重要提示：由于“position: sticky”属性的推出时间不到4年，目前在Chrome浏览器中尚无法使用该属性。请知悉。 - clankill3r

@clankill3r 只有...... :-P 顺便说一下，它曾经在 Chrome 中工作，直到他们破坏了它。 - TylerH

Answer 4

在Anwar Hussain的回答基础上，我找到了成功的方法：

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

下滑页面时，这将为导航栏应用类别，但在向上滑动页面时会将该类别移除。以前，在向上滑动页面时，应用的类别将保留在导航栏中。

- Kyle Higginson

Answer 5

根据Vucko在迁移文档中的引用，ScrollPos-Styler库非常适合我。要将元素设置为“粘性”，请按以下步骤操作：

1. 将.js ScrollPos-Styler（scrollPosStyler.js）文件包含到您的页面中。
2. 找到相关的<div>元素。

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

3. 应用sps sps--abv类。

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

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
}

- MackieeE

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

- TranDuc

---

添加一些解释你的答案 - Anandhu Nadesh

使用Bootstrap 3，属性data-spy="affix"和data-offset-top="number"。 - TranDuc

Answer 7

对于想要使用纯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');
    }
}

- Ilyas karim

Answer 8

使用Bootstrap 4有一个特殊的类。尝试删除data-spy="affix" data-offset-top="90"属性，只需添加'sticky-top'即可。

文档

- d.popov

---

我三年前遇到了这个问题。但感谢你的回答，它会帮助其他人。 - Ilyas karim

Answer 9

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

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

只需将代码包含在您的项目中，然后指定要粘住的元素即可。

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

- DazBaldwin

---

问题在于我无法让建议的8行代码正常工作。我对JS或CSS并不是完全的新手。此外，8行代码只是最低要求，还有其他因素需要考虑，例如不同类型的滚动事件。 - DazBaldwin

Answer 10

在Bootstrap 4中简单使用fixed-top类，并使用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');
    }
});

- Vahid Alvandi

---

重复的内容 https://dev59.com/6FoV5IYBdhLWcg3wXNs9#47469634，已经发布了相同的答案。 - Ilyas karim