When I add a website name as a prefix, the name is initially hidden. As the user scrolls down, the website name becomes visible, and as they scroll back up, it disappears again. I have implemented this feature using jQuery.
$(document).ready(function(){
$(window).scroll(function(){
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
$(".brand_name").removeClass("hidden");
} else {
$(".brand_name").addClass("hidden");
}
});
});
Here is the code for the navigation bar:
<nav class="navbar navbar-default clearfix" data-spy="affix" data- offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand brand_name hidden" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#section1">Movies</a></li>
<li><a href="#section2">Sports</a></li>
<li><a href="#section3">Attraction</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Events <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
While this works fine in Mozilla, there seems to be a problem in Chrome. Can anyone help me with resolving this issue?