August 19, 2014

How to hide/fade div on scroll down?

How to hide/fade div on scroll down

This is really an interesting one. When the you scroll down you can hide an element (div/image/etc.) This is used when you need to hide the scroll down button when you scroll down the page and make the scroll to top button appear.

HTML

<div>
    <div class="fade">
        Scroll down i will become invisible
    </div>
</div>

CSS

body {
    height: 2000px;    
}
.fade {
    height: 300px;
    width: 300px;
    background-color: #d15757;
    color: #fff;
    padding: 10px;
}

jQuery

$(window).scroll(function() {
    if ($(this).scrollTop()>0)
     {
        $('.fade').fadeOut();
     }
    else
     {
      $('.fade').fadeIn();
     }
 });

Attachment

I have used external attachment.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
demo

No comments:

Post a Comment

Popular Posts

Views