CODEWITHSUNDEEP
jqueryhtmlscrollhidefade
mattroberts33
mattroberts33

Reputation: 280

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!

Upvotes: 0

Views: 1806

Answers (2)

ATOzTOA
ATOzTOA

Reputation: 35950

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

Upvotes: 1

adeneo
adeneo

Reputation: 318182

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

#magrig {display:none}

Upvotes: 2

Related Questions