我正在使用 Bootstrap 构建网站模板。当用户加载页面并且他/她正在查看页面顶部时，我希望导航是透明的。标题是深色的，因此透明导航看起来要好得多。但是，我希望当用户开始向下滚动时，导航会变暗，以便导航链接在浅色背景下变得可见。我查看了其他几个模板以获得一些指导，但我仍然无法尝试将其实现到我自己的模板中。我见过有些人使用 javascript/jquery，但我对 javascript 不太擅长，也不知道如何实现。非常感谢任何帮助！
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap
$(window).scroll(function() {
var $nav = $('#nav'),
scroll = $(window).scrollTop();
if (scroll >= 34) {
$nav.addClass('dark-background');
} else {
$nav.removeClass('dark-background');
}
});.dark-background {
background-color: gray;
}
#nav {
background-color: transparent;
}【讨论】：
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$("body").css('background-color', 'red')
$.data(this, 'scrollTimer', setTimeout(function() {
$("body").css('background-color', 'white')
console.log("Haven't scrolled in 250ms!");
}, 250));
});body {
height: 5000px;
width: 100px;
overflow: scroll;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body></body>归功于这个答案：
jQuery scroll() detect when user stops scrolling
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$("body").css('background-color', 'red')
$.data(this, 'scrollTimer', setTimeout(function() {
$("body").css('background-color', 'white')
console.log("Haven't scrolled in 250ms!");
}, 250));
});
只是为了分解正在发生的事情：
1) 在window 对象上附加一个scroll 事件监听器。并传递给它一个在该事件上执行的函数。
$(window).scroll(function(){})
2) clearTimeout 与 setTimeout 齐头并进。如果你打开浏览器的开发者控制台并输入
$(window).data()
它应该返回一个空对象，因为您可能还没有为它分配任何东西。现在，如果你输入
$(window).data('myData', 'my_value')
$(window).data() //=> returns an -> Object {myData: "my_value"}
你也可以像$.data(element)这样访问元素的数据：
$.data(window) //=> returns an -> Object {myData: "my_value"}
对#clearTimeout 的第一次调用是针对空属性调用的，因为尚未将scrollTimer 分配给window.data() object。
3) 设置元素的颜色。在这种情况下，我以body 为例，但您需要输入正确的选择器：
$('body').css('background-color', 'red')
4) 使用#setTimeout函数在时间过去后返回原始颜色。
$.data(this, 'scrollTimer', setTimeout(function() {
$('body').css('background-color', 'white')
console.log("Haven't scrolled in 250ms!");
}, 250));
函数里面的this，代表window：
$.data(this, 'scrollTimer', setTimeout(function() {...}, 250)
等同于：
$.data(window, 'scrollTimer', setTimeout(function() {...}, 250)
它正在访问window对象中的数据
PS：为了让 sn-p 工作，您可能必须全屏显示
【讨论】：
尝试以下方法：
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 50);
});
这将在用户滚动 50 px 后切换类，如果您想更改它，只需将 50 更改为您希望切换类的 px 量。
如果您使用的是引导导航栏结构，那么 css 将如下所示，带有淡入淡出过渡：
.navbar-default{
transition:500ms ease;
background:transparent;
}
.navbar-default.scrolled{
background:#000;
}
这是一个向你展示这个工作的小提琴Fiddle Demo
【讨论】：
在 Bootstrap 4 中不再存在 affix 组件，但 ScrollSpy 组件存在。
https://www.codeply.com/go/aN4tfy0zU0
您还可以使用 Bootstrap Affix component 来观察滚动位置，而不是使用额外的 jQuery/JavaScript。只需为导航栏定义 .affix-top 和 .affix CSS。
@media (min-width:768px) {
.affix-top {
/* navbar style at top */
background:transparent;
border-color:transparent;
padding: 15px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
}
并设置您希望导航栏更改样式的位置（即；距顶部 400 像素）
<div class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="400">
【讨论】：