CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tom
Tom

Reputation: 11

Fade out at specific scroll position

I can now fade in a at a specific scroll height. But now I also want to fade out a at specific scroll height. My code for the fade out:

<script type="text/javascript">
    window.onscroll = function()
    {
    if( window.XMLHttpRequest ) {
        if (document.documentElement.scrollTop > 25 || self.pageYOffset > 25) {
            $('.pulse').css('display','block');
        } else if (document.documentElement.scrollTop < 25 || self.pageYOffset < 25) {
            $('.pulse').css('display','none');
    }
}

And in css:

display: none;

How can I fade out a at specific height?

Thanks for the help

Upvotes: 0

Views: 335

Answers (1)

Szymon
Szymon

Reputation: 1415

You can use fadeIn() and fadeOut() functions provided by jQuery:

//to show
$('.pulse').fadeIn(1000);
//to hide
$('.pulse').fadeOut(1000);

Docs of these functions:

http://api.jquery.com/fadeout/ http://api.jquery.com/fadein/

Upvotes: 1

Related Questions