How do I fade a div in/out on page scroll?

jquery scroll fade show-hide
egr103 picture egr103 · Feb 24, 2012 · Viewed 32.2k times · Source

Here is the jsfiddle: http://jsfiddle.net/NKgG9/

I'm basically wanting those pink boxes to be on show on page load as normal but as soon as a user scrolls down the page I want them to fade out and disappear. When the user scrolls back up to their position or the top of the browser window I want those pink boxes to fade back in again. I'm useless with JS so good do with some help on how to do this.

All help appreciated.

Answer

Cheery picture Cheery · Feb 24, 2012

Very simple example: http://jsfiddle.net/a4FM9/2/

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});​

Related questions

Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window

I'm trying to get a series of elements to fade in on scroll down when they are fully visible in the window. If I keep scrolling down, I do not want them to fade out, but if I scroll up, …

Read More
jQuery scroll to element

I have this input element: <input type="text" class="textfield" value="" id="subject" name="subject"> Then I have some other elements, like other text inputs, textareas, etc. When the user clicks on that input with #subject, the page …

Read More
Smooth scrolling when clicking an anchor link

I have a couple of hyperlinks on my page. A FAQ that users will read when they visit my help section. Using Anchor links, I can make the page scroll towards the anchor and guide the users there. Is there …

Read More