jquery script not executing in Firefox

Question

I'm using a script that minimizes my top menu when scrolling the page down. The script is working just fine in Chrome and Safari but in Firefox it won't minimize.

Here's the page: http://smedjan.macework.se/boende/

Here's my script:

$(function(){
        $('#menubar').data('size','big');
    });

    $(window).scroll(function(){
        var $nav = $('#menubar');
        if ($('body').scrollTop() > 10) {
            if ($nav.data('size') == 'big') {
                $nav.data('size','small').stop().animate({
                    height:'50px',
                    top:'0px'
                }, 600);
            }
        } else {
            if ($nav.data('size') == 'small') {
                $nav.data('size','big').stop().animate({
                    height:'150px',
                    top:'20px'
                }, 600);
            }  
        }
    });

    $(function(){
        $('.smedjanlogo').data('size','big');
    });

    $(window).scroll(function(){
        var $nav = $('.smedjanlogo');
        if ($('body').scrollTop() > 10) {
            if ($nav.data('size') == 'big') {
                $nav.data('size','small').stop().animate({
                    height:'50px'
                }, 600);
            }
        } else {
            if ($nav.data('size') == 'small') {
                $nav.data('size','big').stop().animate({
                    height:'auto'
                }, 600);
            }  
        }
    });

Answer 1

While trying to fix your problem I could not help myself notice few facts -

1. You are not initializing your codes inside $(document).ready(). you are using them outside, so there might be a possibility that sometimes, jQuery will not be loaded before you use it -

2. FireFox does not work scroll with body as @Tushar mentioned.

3. In firefox, while scrolling multiple events are fired, so there is no check that whether a scrolling animation is taking place.

So I have taken the liberty to optimize your code a little -

$(function(){
    var scrolling = false;
    $('#menubar').data('size','big');
    $('.smedjanlogo').data('size','big');
    $(window).scroll(function(){
        if(!scrolling){
            scrolling = true;
            var $nav = $('#menubar');
            if ($(document).scrollTop() > 10) {
                if ($nav.data('size') == 'big') {
                    $nav.data('size','small').stop().animate({
                        height:'50px',
                        top:'0px'
                    }, 600);
                }
            } else {
                if ($nav.data('size') == 'small') {
                    $nav.data('size','big').stop().animate({
                        height:'150px',
                        top:'20px'
                    }, 600);
                }  
            }

            $nav = $('.smedjanlogo');
            if ($(document).scrollTop() > 10) {
                if ($nav.data('size') == 'big') {
                    $nav.data('size','small').stop().animate({
                        height:'50px'
                    }, 600, null);
                }
            } else {
                if ($nav.data('size') == 'small') {
                    $nav.data('size','big').stop().animate({
                       height:'auto'
                    }, 600, null);
                }  
            }

            setTimeout(function(){
                 scrolling = false;
                 $(window).scroll();            
            },600);
        }
    });
});

Here is the version I used while testing in firefox javascript console. Hope this helps.

Answer 2

Try

Change

if ($('body').scrollTop() > 10) {

to

if ($('body, html').scrollTop() > 10) {

Or

if ($(document).scrollTop() > 10) {

---

Firefox places the overflow to html instead of body tag .

So use $('body, html').scrollTop() which will work on chrome,Firefox.

Answer 3

This is Firefox problem. Don't use $('body').scrollTop() for getting scroll position.

Firefox has the overflow at html-level and not body-level as the webkit based browser.

you can use

$('body, html').scrollTop() > 10