Question

I’m trying to animate the opacity of a div using jQuery. It works fine when I don’t use this if/else statement, but when I do, there is a delay before the animation takes place. I tried setting delay to ‘0’ but that didn’t help. Here is the code:

$(window).scroll(function(){ 

    if ($(this).scrollTop() > 60){ 
        $('#navStick').fadeTo("slow", 1);
    } else {
        if ($(this).scrollTop() <= 60){
            $('#navStick').fadeTo("slow", 0);
        }
    }

});

Answer 1

As Joseph Silber said, the second if statement is redundant. Control will only reach that point if it’s less than or equal to 60.

Try using .stop(true) before your animations

$(window).scroll(function(){ 

    if ($(this).scrollTop() > 60){ 
        $('#navStick').stop(true).fadeTo("slow", 1);
    } else {
        $('#navStick').stop(true).fadeTo("slow", 0);
    }

});