Fade Out On Scroll

Question

I'm relatively new to JQUERY and I'm looking for a point in the right direction.

How do I achieve a fade on scroll effect?

Like http://fearthegrizzly.com/ or http://davegamache.com

Ideally I'd like the option to drop whatever image I want to fade out into a div. If that's possible.

It's probably worth mentioning I want to implement this on Cargo Collective.

Thanks

Answer 1

Tip for asking question: Don't just tell us what you want. We're not here to do your work for you. Show us what you've tried so we can help fix it.

That being said, this is a start...

When the window's scroll top position is greater than 20px, it fades a div out, when you scroll back up, it fades it back in.

$(window).scroll(function(){
   if($(window).scrollTop()<20){
         $('.fader').stop(true,true).fadeIn("slow");
   } else {
         $('.fader').stop(true,true).fadeOut("slow");
   }
});

DEMO

Answer 2

fearthegrizzly.com uses a .css() method. You could try:

$(window).scroll(function() {
    $(".header-image").css({
    'opacity' : 1-(($(this).scrollTop())/250)
    });          
});

You scroll down 250px, the property is fully faded out and vice versa.