javascript - 滚动时如何使 Bootstrap 导航改变颜色？

Question

我正在使用 Bootstrap 构建网站模板。当用户加载页面并且他/她正在查看页面顶部时，我希望导航是透明的。标题是深色的，因此透明导航看起来好多了。但是，我希望当用户开始向下滚动时，导航变暗，以便导航链接在浅色背景下变得可见。我查看了其他几个模板以获取一些指导，但我仍然无法尝试将其实现到我自己的模板中。我见过一些人使用 javascript/jquery，但我不太擅长 javascript，也不知道如何实现。非常感谢任何帮助!

Answer 1

尝试以下操作:

$(window).scroll(function(){
    $('nav').toggleClass('scrolled', $(this).scrollTop() > 50);
});

这将在用户滚动 50 像素后切换类，如果您想更改它，只需将 50 更改为您希望切换类的向下像素量。

然后，如果您使用的是 Bootstrap 导航栏结构，则 css 将如下所示并带有淡入淡出过渡:

.navbar-default{
  transition:500ms ease;
  background:transparent;
}
.navbar-default.scrolled{
  background:#000;
}

这是一个 fiddle ，向您展示这个工作 Fiddle Demo