How to animate fixed div without having to scroll to top with WOW.js and BS3

Question

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.

score 1 · Accepted Answer · answered Oct 18 '16 at 10:06

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.

How to animate fixed div without having to scroll to top with WOW.js and BS3

1 Answers1