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

问题

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!

回答1:

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

#magrig {display:none}

回答2:

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;
}

来源：https://stackoverflow.com/questions/14584666/how-to-use-jquery-to-hide-div-then-fade-it-in-on-document-scroll