如何动态更改滚动条上的导航栏颜色？

滚动时动态改变导航栏颜色

实现导航栏最初没有背景颜色并在滚动后逐渐改变其颜色需要结合 JavaScript和CSS修改。

JavaScript:

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

此代码检查文档的垂直滚动位置。如果它超过导航栏的高度，则会将“滚动”类切换到导航栏元素。

CSS：

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

此 CSS 代码定义外观具有“滚动”类的导航栏。它在更改颜色时应用白色背景色和平滑过渡效果。

实现：

通过将提供的 JavaScript 代码添加到 HTML 文档的头部并将CSS代码添加到您的样式表中，您可以轻松实现这种动态导航栏颜色变化。当用户向下滚动页面时，导航栏会逐渐过渡到所需的背景颜色。

参考：

有关现场演示，请参考以下 JSFiddle： [JSFiddle](https://jsfiddle.net/qe9L725y/).

以上是如何动态更改滚动条上的导航栏颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！