Search jQuery

jQuery Forum

addClass not working on Firefox

in Using jQuery • 9 years ago

I'm experimenting with CSS3 transitions and am trying to use the addition of a class via jQuery to trigger the transition. In this case, I want the class added, and thus the transition to happen, when scrolling begins. So:

$(document).ready(function(){
$(window).scroll(function(){
var $theTop = $( 'body' ).scrollTop()
if ( $theTop > 2) {
$('#falling-man').addClass( 'drop' );
}
else {
$('#falling-man').removeClass( 'drop' );
}
});
});

This is working in Safari and Chrome, but I can see in Firefox the class is not being added.

See it here: http://r5.dev.bobpassaro.com/

I'm pretty new to jQuery, so not sure what wrong.

As a side issue, I first tried using toggleClass, but it seemed to fire continually, causing weird behavior -- so I tried add and remove and it worked better.

Replies(5)

jakecigar

Re: addClass not working on Firefox

9 years ago

Try…

var $theTop = $( 'body' ).scrollTop() || $('html').scrollTop()

Because firefox does the scrolling on the <html> , not <body>.

This use of toggleClass should work

$('#falling-man').toggleClass( 'drop', $theTop > 2 );

Making the entire script…

$(window).scroll(function(){
var theTop = $( 'body' ).scrollTop() || $('html').scrollTop();
$('#falling-man').toggleClass( 'drop', theTop > 2 );
});

I changed the name of $theTop to theTop, because it is not a jQuery nor are we coding in basic.

JΛ̊KE

bobhenry

Re: addClass not working on Firefox

9 years ago

Thanks, Jake. That answers the question.

And, yeah, if I call just ( 'html' ).scrollTop, then it doesn't work in Chrome.

I still get funky behavior with toggleClass if I use a conditional "if" statement -- but it works properly when I use it as the "switch" parameter, which is probably the better way to do it anyway.

.toggleClass( className, switch )

vs.

if (switch) { .toggleClass( className ) }

According to the docs on .toggleClass they're supposed to be "equivalent" -- but they don't seem to be working in exactly the same way.

Anyway, appreciate your help.

jakecigar