There seems to be an issue with the transition effect in my jQuery code that changes the background color of the .navbar upon scrolling. Even though it is supposed to start with a transparent background, it always begins with a yellow background. I have found a temporary solution by quickly moving down and then back up, but this is not ideal.
Is there a mistake in my implementation?
Thank you!
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>