当导航栏到达我页面的“关于”部分时,我试图让我的导航栏背景颜色从透明变为蓝色。根据来自控制台的调用,滚动后,scroll_start
变得大于 aboutOffSetTop
,但导航栏颜色没有改变。为什么会发生这种情况,我该如何解决?
HTML:
<div id="titleSection">
<div class="nav_bar">
<ul> <li> <a href="index.html">HOME</a> </li>
<li> <a href="transportation.html">TRANSPORTATION</a> </li>
<li> <a href="crafts.html">SHOPS</a> </li>
<li> <a href="activities.html">EVENTS</a> </li>
<li> <a href="food.html">FOOD</a> </li>
</ul>
</div>
</div>
<div class="about">
<p> Text here </p>
</div>
CSS:
.nav_bar {
transition: 1s;
background-color: transparent;
}
JavaScript:
$(document).ready(function() {
var scroll_start = 0;
var aboutOffSetTop = $('.about').offset().top;
$(document).scroll(function() {
scroll_start = $(window).scrollTop();
if(scroll_start > aboutOffSetTop) {
$('.nav').css('background-color', 'rgba(34,34,34,0.9)');
} else {
$('.nav').css('background-color', 'transparent');
}
});
});
最佳答案
改变这部分:
if(scroll_start > aboutOffSetTop) {
$('.nav').css('background-color', 'rgba(34,34,34,0.9)');
} else {
$('.nav').css('background-color', 'transparent');
}
对此:
if(scroll_start > aboutOffSetTop) {
$('.nav_bar').css('background-color', 'rgba(34,34,34,0.9)');
} else {
$('.nav_bar').css('background-color', 'transparent');
}
关于javascript - 为什么导航栏在滚动后不改变其背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40708235/