Question

我一直在尝试使用Bootstrap 4 Alpha在我的Wordpress网站上创建一个粘性边栏一段时间。我在网上发现了与此类似的其他问题，大多数建议将代码放在

中

jQuery(document).ready(function($){
});

我试过这个但没有成功。我也尝试重新排列我的脚本被调用的顺序，但也没有。

这是我目前拥有的基本Bootstrap侧边栏代码

jQuery(document).ready(function($){
$('#sidebar').affix({
      offset: {
        top: 245
      }
});

var $body   = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;

$body.scrollspy({
    target: '#leftCol',
    offset: navHeight
});
});

这是错误消息

未捕获的TypeError：$（...）。affix不是函数

有人会碰巧知道为什么会出现这个问题吗？

由于

Answer 1

从bootstrap版本4中删除了Affix。 Bootstrap 4 documentation says -

删除了Affix jQuery插件。我们建议使用位置：粘性polyfill。有关详细信息和特定的polyfill建议，请参阅HTML5 Please条目。

如果你使用Affix来应用额外的非位置样式，那么   polyfills可能不支持您的用例。这种用途的一个选择是   第三方ScrollPos-Styler库。

现在有了补救措施---

Take a look at it it should help you to achieve what you want

Answer 2

Affix was dropped from bootstrap v4，他们建议改用position: sticky; polyfill。

Answer 3

使用css的粘性位置。

这里可以看到很好的例子：https://css-tricks.com/position-sticky-2/

Answer 4

我有同样的问题，这是我解决它的方式

使用bootstrap.js 3.0版并且正常工作

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

如果不起作用？试试这个：更新jquery和bootstrap

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

词缀不是一个功能

4 个答案: