当我滚动回到页面顶部时,我的导航栏返回到原始样式时出现问题。我已经对我的CSS和jQuery进行了更改以解决这个问题。到目前为止,没有运气。
HTML
<nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse col-md-12 pull-left" id="navigation">
<ul class="nav navbar-nav">
<li class="active" id="phone-number"><a href="tel:17777777777"><i class="glyphicon glyphicon-phone"></i> (777)777-7777</a></li>
<li><a href="#overview">Overview</a></li>
<li><a href="#about">about</a></li>
<li><a href="#location">location</a></li>
</ul>
</div>
</div>
</div>
</nav>
CSS:
.navbar-default{
color: white;
background:transparent;
border:none !important;
box-shadow:none;
}
.navbar {
text-decoration: none;
font-size: 1.6em;
border:none !important;
}
.nav {
color:"black";
background:transparent;
font-size:10px;
}
.nav-collapse {
color:"white";
background:"#001529";
}
.navbar {
padding: 3em;
}
.navbar-default .navbar-nav>li>a, #phone-number {
color: #ffffff;
font-family: montserrat;
font-size: 16px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #ffffff;
background:transparent;
box-shadow:none;
}
jQuery的:
// Navbar
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#001529').css('color', 'white');
} else {
$('.nav').css('background-color', 'transparent');
}
});
}
});