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

Solution 1:

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

#magrig {display:none}

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