javascript - 滚动后更改导航栏颜色？

Question

如何设置没有背景色的导航栏？

当在 div 之后向下滚动时，导航栏获得新的背景色(导航栏应该固定在顶部，我在 Bootstrap 中使用 navbar-fixed-top)

我尝试了一些教程，但没有成功。

这是网站:http://attafothman.olympe.in/
我说的是顶部的黑色导航栏。

Answer 1

这是在窗口滚动后更改导航栏颜色的最简单方法:

在头部添加follow JS:

$(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;
}

当滚动超过导航栏的高度时，固定导航栏的背景颜色将变为白色。

见关注JsFiddle