How to use jQuery to hide div then fade it in on document scroll?

Question

I'm trying to use jQuery to hide a div when the page loads, but when you scroll down to a certain point it will fade in. Right now the below script will do almost that, the problem I'm having is that the div is visible at first on page load, I want to hide it... I can't seem to figure out how.

    $(window).bind("scroll", function() {
        if ($(this).scrollTop() > 180) {
            $("#magrig").fadeIn('slow');
        }
        else {
            $("#magrig").stop().fadeOut('fast');
        }
    });

I've tried adding .hide() into the script, but I can't figure out how to reformat it.

I got it origonally from here: Fade in div after scrolling

Any help is greatly appreciated!

score 2 · Accepted Answer · answered Jan 29 '13 at 13:59

2

How about just using plain old CSS, that will hide it on pageload :

#magrig {display:none}

answered Jan 29 '13 at 13:59

adeneo

312,895
29
395
388

I actually didn't think of using display: none, I've tried visibility: hidden and the jQuery code didn't like that, but display works perfectly... Thanks, I feel like this was a bit of a dumb question haha – mattroberts33 Jan 29 '13 at 14:05

score 1 · Answer 2 · answered Jan 29 '13 at 14:00

1

You can hide the div on page load, like this:

$(document).ready(function() {
    ("#magrig").hide();
});

Or you can do it directly in the CSS:

#magrig {
    /* other CSS entries */
    display:none;
}

answered Jan 29 '13 at 14:00

ATOzTOA

34,814
22
96
117

I suppose I probably could have tried that one, I was spending more time trying to figure out how to put it all into one script instead. Thanks! – mattroberts33 Jan 29 '13 at 14:08

How to use jQuery to hide div then fade it in on document scroll?

2 Answers2

Linked