Add/remove class by jquery

[Romchick]

Hey, guys, here is the code:

$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 800) {
$(‘.header-menu’).addClass(‘fixed’);
$(‘html’).addClass(‘whitespace’);
$(this).delay(1000).queue(function(){
$( ‘.header-menu’).addClass(‘shadow-menu’);
$(this).dequeue();
});
} else {
$(‘.header-menu’).removeClass(‘shadow-menu’);
$(‘.header-menu’).removeClass(‘fixed’);
$(‘html’).removeClass(‘whitespace’);
};
});
});

And the issue: when I move back to top the class ‘shadow-menu’ appears again. Why this happens?

[Senff]

Can you create a reduced case in Codepen.io so we can see what happens exactly?

[Romchick]

http://codepen.io/NeedHate/pen/xlmBt
Its a bit messy, but as you can see: when its ‘else’ in code every class works exectly right, but ‘shadow-menu’ still appears when you scroll to top and when you on very top too. why its happening?

[Romchick]

Poor knowledge, thats the only reason.
I was expected the main thing: the delay. Script adds classes and in a moment later it adds the “shaddow” class. As far as I know, I can put .setTimeout? but I dont understand how… yet… Can you help me with it?

[__]

setTimeout is a native javascript function, not a jQuery method. This means you couldn’t chain it with your other jQuery methods:

setTimeout( function(){
    $( ‘.header-menu’).addClass(‘shadow-menu’);
},1000);

But I suspect that you could simply put .addClass after .delay (i.e., without using .queue/.dequeue at all).

[Author]

Posts