У меня есть простая смена классов с помощью jQuery, который активируется путем прокрутки, .navbar начинается с прозрачного фона, а когда он опускается, он становится желтым.Работает как надо, проблема в том, что он всегда начинается с желтого фона.Временное решение состоит в том, чтобы переместиться немного вниз, затем вернуться назад и все, но я думаю, что это очень упрямое решение.
Есть ли что-то, что я делаю неправильно?
Спасибо!
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scrollPos = $(window).scrollTop(),
navbar = $('.navbar');
if (scrollPos > 50) {
navbar.addClass('alt-color');
} else {
navbar.removeClass('alt-color');
}
});
});
.navbar {
background-color: transparent !important;
-webkit-transition: all .5s;
transition: all .5s;
}
.navbar.alt-color {
background-color: yellow !important;
}
.demo {
width: 10%;
margin: 0 auto;
margin-top: 100px;
}
<head>
<!--Botstrap 3 CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<nav class="navbar navbar-default navbar-fixed-top alt-color">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- ignore-->
<section>
<div class="demo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue velit, vehicula eu pretium in, semper sit amet sem. Suspendisse tortor quam, tincidunt id nisi ut, hendrerit sodales lectus. Proin quis mauris id arcu molestie euismod.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</section>
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Botstrap 3 JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>