Search code examples
javascripthtmlcsstwitter-bootstrap-3wow.js

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


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.


Solution

  • 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.