I am using WOW.js to animate a navbar which is fixed to the top with navbar-fixed-top. Unfortunately if i am already paste the top, the navbar wont be animated until i goto the top of the page again.
Is there a way to force that particular part which consists of the menu to be animated no matter what?
HTML
<div class="container">
<div class="navbar navbar-default navbar-fixed-top wow fadeInDown">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li>
</ul>
</li>
<li><a href="http://getbootstrap.com/css">CSS</a></li>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
</ul>
</div>
</div>
</div>
Code is shown here: https://jsfiddle.net/DTcHh/7108/
Example is shown here: http://fiddle.jshell.net/DTcHh/7108/show/light/
Unfortunately JSFiddle automatically goes to top when the page is refreshed, but if you quickly scroll down while updating the problem becomes visible.
I got the same problem and I built a rough solution:
With jQuery I check, if the Page is not scrolled to top and add a Class to the Item:
$(document).ready(function(){
if($(".navbar").offset().top > 0) {
$('.navbar .wow').each(function(){
$(this).addClass('menu-fix');
});
}
});
then I added following CSS:
.navbar .menu-fix {
visibility: visible !important;
}
It's not a clean solution, but it works.