Javascript “粘贴”在引导程序4（alpha）中不起作用

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

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

...

向下滚动页面后，Bootstrap 4没有将类添加到附加的navbar。有人能告诉我如何解决这个问题吗？Bootstrap.js和jQuery.js正在工作。

删除了粘贴jQuery插件。我们建议使用

位置：sticky

polyfill。详细信息和具体的polyfill建议

如果使用“粘贴”应用其他非

位置

样式，则多边形填充可能不支持您的用例。这种用途的一个选择是第三方库

---

尽管在版本4中已从引导程序中删除了粘贴。但是，您可以通过以下jQuery代码实现您的目标：

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

---

更新引导程序4

文档推荐粘性的polyfill，推荐的滚动位置样式器并不真正帮助滚动位置（您可以轻松定义偏移）

我认为使用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));
  });

var-toggleAffix=函数（附加元素、包装器、滚动元素）{
var height=affixElement.outerHeight（），
top=wrapper.offset（）.top；
if（scrollElement.scrollTop（）>=top）{
包装。高度（高度）；
词缀。添加类别（“词缀”）；
}
否则{
移除类（“粘贴”）；
包装器高度（'auto'）；
}
};
$（'[data toggle=“stax”]'）。每个（函数（）{
var ele=$（此），
包装器=$（''）；
ele.before（包装器）；
$（窗口）.on（'scroll resize'，function（））{
toggleAffix（ele，wrapper，$（this））；
});
//初始化
toggleAffix（ele，wrapper，$（窗口））；
});

编辑：另一个解决方案是在引导程序4中使用它作为替代

---

---

相关：

根据Vucko在Mirgation文档中的引用，这个库非常适合我

将

.js scrollpostyler

（

scrollpostyler.js

）文件包含到页面中

找到您希望设置为“粘性”的相关

应用

sps-abv

class

添加

.css

您希望在元素变粘后触发的样式（根据

---

---

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

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

---

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

尝试了我能找到的每个解决方案后（注意到已从引导程序4中删除了词缀），获得所需粘性效果的唯一方法是使用

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

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

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

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

---

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

---

简单使用引导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');
    }
});

---

对于bootstrap 4，有一个专门的类。 尝试删除

data spy=“stax”data offset top=“90”

属性，只需添加“sticky top”

---

你读过Bootstrap 4文档吗？如果你读过，并且这是Bootstrap 4文档中指定的，你可以创建一个问题@jamie你的意思是词缀插件被删除了？@jamie如果词缀被删除了，我们如何做像词缀一样的事情？请看@vucko的答案。我甚至没有检查文档或使用Bootstrap 4…只是为了提醒你一个方法。请看vucko的答案回答更多细节。LoL我刚刚花了整整一个小时试图弄清楚为什么粘贴不起作用…似乎我开始在用过的boostrap v4而不是v3上工作…从现在起，我将始终检查页面是否使用“标准”版本，而不是一些“最新的未来”：重要提示：

position:sticky

在chrome中不起作用，因为它推出至今只有4年了…@clangkill3r only…：-P仅供参考，它在Chrome中一直工作，直到他们破坏了它。我假设

$（'.navbar'）.addClass（'navbar'）

应该是

$（'.navbar'）.addClass（'fixed-top'）？否则，我看不出添加一个已经存在的类会有什么效果。请为您的answerexp引导3、attr data spy=“affix”和data offset top=“number”添加一些解释。关键是我无法让建议的8行正常工作。我也不是一个有JS或CSS的noob。此外，最少8行，还有其他因素需要考虑，例如不同类型的滚动事件。这非常有效，谢谢。它也适用于scrollspy。的副本，相同的答案已发布。我3年前就有这个问题。但是谢谢你的回答。它将帮助其他人。
$(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if ( scrollValue > 70) {
         $('.navbar-sticky').addClass('fixed-top');
    }else{
       $('.navbar-sticky').removeClass('fixed-top');
    }
});