词缀不是函数

Posted 2023-03-06

【中文标题】词缀不是函数

【英文标题】：Affix is not a function

【发布时间】：2017-07-03 11:23:48

【问题描述】：

一段时间以来，我一直在尝试使用 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
);
);

这是错误信息

未捕获的类型错误：$(...).affix 不是函数

有谁知道为什么会出现这个问题？

谢谢

【问题讨论】：

检查，您正确引用 jquery 吗？或带有 html 元素的数据间谍

再见词缀，尝试使用另一个库。

【参考方案1】：

词缀已从引导版本 4 中删除。 Bootstrap 4 documentation says--

删除了 Affix jQuery 插件。我们建议使用 position:sticky polyfill 代替。有关详细信息和具体的 polyfill 建议，请参阅 HTML5 Please entry。

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

现在补救措施来了---

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

【讨论】：

感谢您帮我解决这个问题！下次我应该更好地阅读文档。

【参考方案2】：

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

【参考方案3】：

在 css 中使用粘性位置。

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

【参考方案4】：

我有同样的问题， 我就是这样解决的

使用 bootstrap.js 版本 3.0 并且它可以工作

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

如果它不起作用？试试这个：更新 jquery 和引导

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

【讨论】：

这不是一个好的解决方案，尤其是当问题是特定于 Bootstrap 4 时。