如何更改滚动导航栏背景颜色？

修改导航栏滚动后颜色

问题：

如何删除背景最初来自导航栏的颜色，然后在滚动后添加新颜色发生？

场景：

相关网站 https://attafothman.olympe.in/ 的顶部有一个黑色导航栏，应保持固定位置。但是，当向下滚动到某个 div 下方时，导航栏会自动获取新的背景颜色。

解决方案：

要解决此问题，可以结合使用 JavaScript 和 CSS是

JavaScript：

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

此 JavaScript 代码在滚动时触发事件侦听器。当滚动位置超过导航栏的高度时，它会向元素添加一个名为“scrolled”的自定义 CSS 类。

CSS:

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

此 CSS规则定义“滚动”类的行为。一旦添加了“scrolled”类，它就会为具有“navbar-fixed-top”类的元素分配纯白色背景色。 '!important' 关键字确保此规则覆盖任何冲突的样式。

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