CODEWITHSUNDEEP
javascriptjquerycssfirefox
under5hell
under5hell

Reputation: 997

JQuery animate is not working in firefox

I have Jquery script to play navbar animation on one page and disable it on another page. it works on chrome but not on firefox. Heres my code:

var URL = window.location.pathname;
URL = URL.split("/");
if(URL[1] != 'holiday') {
    $('.navbar').addClass('hide-menu');
    $(window).scroll(function() {
        slider();
    });
} else {
    $(".navbar").addClass('show-menu');
}

The slider function :

function slider() {
    if (document.body.scrollTop > 500)
        $('.navbar').stop().animate({
            "margin-top" : '0'
        });
    else
        $('.navbar').stop().animate({
            "margin-top" : '-150px'
        });
}

The CSS:

.show-menu {
    margin-top: 0px; 
}
.hide-menu {
    margin-top: -150px;
}

Firefox hide the menu but it fail to play the animation and show the menu back. Any suggestion guys? thanks

Upvotes: 1

Views: 1541

Answers (1)

Pointy
Pointy

Reputation: 413712

You have to get the scroll amount from the element that actually has the scrollbar. Firefox considers that to be the <html> element.

You can wrap all your content in a container that's got overflow: auto set, and then use that as the thing to check for scroll amount as well as the place to put the scroll event handler. Here's a jsbin.

<body>
  <div id=everything>
    <div class=navbar>
      HELLO WORLD
    </div>
    <!-- content ... -->
  </div>
</body>

and CSS:

html, body { height: 100%; padding: 0; margin: 0; }

#everything { height: 100%; overflow: auto; }

Upvotes: 1

Related Questions