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

使用 Bootstrap 动画/缩小滚动导航栏

控制滚动导航栏的行为可以极大地增强网站上的用户体验。 Bootstrap 使用各种方法为此提供了解决方案。

Bootstrap 5：

Bootstrap 5 引入了 Sticky-top 类，它提供了与之前的 Affix 组件类似的效果。它将滚动时的导航栏固定在页面顶部。但是，当导航栏固定后，它不会触发更改导航栏样式的事件。为了实现这一点，JavaScript 是必要的。一种方法是使用 IntersectionObserver。

Bootstrap 4：

在 Bootstrap 4 中，Affix 组件不可用。要创建粘性导航栏，请使用position:sticky属性（并非所有浏览器都支持）。这会将导航栏粘到顶部，但是当导航栏变得粘性时，您需要使用 JavaScript 来切换导航栏的样式。 IntersectionObserver 或 jQuery 插件（例如 ScrollPos-Styler）可用于此目的。

其他方法：

或者，您可以使用 jQuery 的 $(window).scroll( ) 函数来更改特定滚动位置的导航栏样式。当您知道导航栏应更改的确切位置时，此方法适用。

实现示例：

• [粘性顶部导航栏 - IntersectionObserver演示](https://codepen.io/ChristianMartinelli/pen/jLLYEa)
• [粘性顶部导航栏 - jQuery 演示](https://codeply.com/go/62Roy6RDOa)

更多示例和详细信息，请参阅这些资源：

• https://getbootstrap.com/docs/5.1/components/navbar/#sticky-top
• https://codeply.com/go/62Roy6RDOa
• https://www.itsolutionstuff.com/post/beautiful-sticky-navbar-using-bootstrap-4-with-jquery-javascript-example.html

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