Fade in div after scrolling

Question

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

score 9 · Accepted Answer · answered Jun 23 '12 at 12:53

9

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/

answered Jun 23 '12 at 12:53

VisioN

143,310
32
282
281

this solution is almost perfect for me. i'm using it to fade in a sticky menu on a one-page website. my only issue is that we can see the menu appear and fade when loading the page. is there a way to hide it and avoid seeing the menu appear and fade out? see here: http://dev.manifold.ws/retail28/ – thom_p Mar 13 '14 at 20:26
nevermind, i just hid my menu with css display:none; it did the trick. – thom_p Mar 13 '14 at 20:30

score 2 · Answer 2 · answered Apr 29 '13 at 11:21

2

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

^^ Simply reverse the array :)

answered Apr 29 '13 at 11:21

Gordon

21
1

score 1 · Answer 3 · answered Sep 19 '13 at 18:43

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/

Fade in div after scrolling

3 Answers3

Linked