CODEWITHSUNDEEP
jquery
Ben Gordon
Ben Gordon

Reputation: 437

Fade in div after scrolling

I need to be able to fadein/fadeout a div depending on the amount of px scrolled by the user. Here is the existing jquery I have. I can toggle its view but i'd like to fade that toggle. What is the correct method here?

$("#subOverlay").hide();

$(window).bind('scroll', function(){
    $("#subOverlay").toggle($(this).scrollTop() > 520);
});

Thanks

Upvotes: 2

Views: 19097

Answers (3)

Nunnsey
Nunnsey

Reputation: 11

I was working on something similar to Alexander's link, but needed it to fade quicker than 100% at the top of the screen.

You can adjust when the object starts fading and when it ends fading in relation to the browser size. You can also adjust the start fade opacity if you want to start it at say 0.2 instead of 0.

http://www.kevinnunn.com/fadetest/

Upvotes: 1

Gordon
Gordon

Reputation: 21

$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 520) {
        $("#subOverlay").stop().fadeOut();
     } else {
        $("#subOverlay").fadeIn();
    }
});

^^ Simply reverse the array :)

Upvotes: 2

VisioN
VisioN

Reputation: 145368

It could be done as follows:

$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 520) {
        $("#subOverlay").fadeIn();
    } else {
        $("#subOverlay").stop().fadeOut();
    }
});

DEMO: http://jsfiddle.net/ZHkY8/

Upvotes: 9

Related Questions