[英]JavaScript to change navbar color on scroll not working
我的目标是在滚动后将导航栏从透明更改为指定的颜色。 但是,我的代码似乎无效,因为滚动后该条仍保持透明。 我已经成功地搜索了这个问题,但是我觉得我的js代码应该足以满足我要完成的任务; 只是在js,css或html文件中没有出现一些小错误。
JS:
$(document).ready(function()
{
var scroll_start = 0;
var startchange = $('.navbar-default');
var offset = startchange.offset();
$(document).scroll(function()
{
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top)
{
$('.navbar-default').css('background-color', 'black');
}
else
{
$('.navbar-default').css('background-color', 'transparent');
}
});
});
CSS:
.navbar-default {
background: transparent !important;
transition-duration: 1s;
}
.color-fix>li>a {
color: white !important;
}
.color-fix>a {
color: white !important;
}
#nav-right {
float: right;
}
HTML :(未定义的类来自引导程序)
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header color-fix">
<a class="navbar-brand" href="">g·nee</a>
</div>
<ul class="nav navbar-nav color-fix" id="nav-right">
<li><a href="">Home</a></li>
<li><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
</ul>
</nav>
!important
妨碍您将其删除并起作用。
从CSS中删除!important
,可防止样式覆盖。
.navbar-default {
background: transparent ;
transition-duration: 1s;
}
.color-fix>li>a {
color: white ;
}
.color-fix>a {
color: white;
}
#nav-right {
float: right;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.