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);
            }  
        }
    });

@TusharGupta I think the OP explained it pretty well: "...in Firefox it won't minimize." — benomatis, May 07 '14 at 12:43
Could you post a [fiddle](http://jsfiddle.net/), rather than your website? — Re Captcha, May 07 '14 at 12:43
This statement "if ($('body').scrollTop() > 10)" Changes to "if ($(window).scrollTop()>10)" — dgk, May 07 '14 at 12:48

score 0 · Answer 1 · answered May 07 '14 at 12:51

0

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.

answered May 07 '14 at 12:51

Tushar Gupta - curioustushar

58,085
24
103
107

score 0 · Answer 2 · answered May 07 '14 at 13:01

0

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

answered May 07 '14 at 13:01

Shobha Singh

171
1
10

score 0 · Accepted Answer · answered May 07 '14 at 13:12

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

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 -
FireFox does not work scroll with body as @Tushar mentioned.
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.

It works just fine with this optimization. I'm gonna stick with this one to be on the safe side. Thanks a lot! — user2906953, May 08 '14 at 09:29

jquery script not executing in Firefox

3 Answers3