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

Question

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 1

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");
   }
});​

Answer 2

Thanks - this one really helped me out.

I originally wanted a solution like the "Scroll for More" and did manage to do so with http://jsfiddle.net/a4FM9/12/ - maybe this is useful for anybody.

Answer 3

Like this? http://jsfiddle.net/NKgG9/6/

$(function(){ 
    var targets = $(".title, .social");
    if($(window).scrollTop() > 10){
      targets.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 10){
            targets.stop(true, true).fadeOut("fast" );
        } else {
            targets.stop(true, true).fadeIn("fast");
        }
    });

});

The basic idea: subscribe to the scroll event. If the scroll position moves past a certain point, start the fade out and likewise if the user scrolls up fade in. Some important details: keep track if you're already fading in/out (variable shown) and stop any ongoing fade if you start a new fade.