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