如何在滚动时设置动画或缩小 Bootstrap 导航栏？

如何使用 Bootstrap 在滚动时设置动画或缩小导航栏

搜索在滚动时设置动画或缩小导航栏的解决方案通常会导致过时的信息，尤其是与 Bootstrap 3 有关的信息。本文重点介绍 Bootstrap 的当前解决方案4 和 5。

Bootstrap 5

Bootstrap 5 保留了 Sticky-top 类，用于在滚动时创建静态到固定的导航栏效果。或者，您可以利用 JavaScript IntersectionObserver 来监视“触发器”元素，并在触发器可见时将 CSS 类应用到导航栏。然后，此类可以包含必要的 CSS 来调整导航栏的外观和位置。

Bootstrap 4

由于 Bootstrap 4 缺少 Affix 组件，因此您可以使用 Sticky-顶级类，用于在导航栏到达顶部时附加导航栏。但是，仅此方法不会触发 JavaScript 事件来指示何时添加导航栏。因此，一旦导航栏变得粘性，您将需要 JavaScript 来操纵导航栏的样式。 IntersectionObserver 是一个合适的选项，用于检测导航栏上方的触发元素何时到达视口并触发“粘性”状态。

jQuery 替代方案

除了使用 Bootstrap 的内置 -在功能上，您还可以使用 ScrollPos-Styler 等 jQuery 插件或编写自己的 jQuery 脚本来控制滚动导航栏的样式。一种方法是使用 data-toggle="affix" 定义固定顶部导航栏，并使用 jQuery 观察滚动位置并有条件地切换 .affix 类。

其他资源

• [粘性顶部导航栏 - IntersectionObserver演示](https://codepen.io/pdreier/pen/QWNYrrZ)
• [粘性顶部导航栏 - jQuery 演示](https://codeply.com/go/62Roy6RDOa)
• [更多 Bootstrap 4 更改滚动导航栏样式示例](https://wrapbootstrap.com/theme/change-navbar-style-on-scroll-bootstrap-147)

以上是如何在滚动时设置动画或缩小 Bootstrap 导航栏？的详细内容。更多信息请关注PHP中文网其他相关文章！