使用JavaScript / jQuery向下滚动效果

Question

I'm looking for some guidance on how I can recreate this feature. As you can see if you scroll down the opacity changes and the title fades away as the div below comes up. Any ideas or tutorials which can help me? http://davegamache.com/

Till now I have tried only the $(window).scroll(function(){…}); where I can scroll down to a certain trigger and pop up a small div for example. I guess I have to play also with the opacity now. Any help please?

Answer 1

You have the right idea using $(window).scroll(function(){…});

You'll want to figure out the Y-Coordinate at which you want the div to be invisible and calculate the opacity of the div from that. Most of the time, I'd imagine this Maximum Y-coordinate should be the same as the height of the effected div. Lets say our div is 500px in height. If the div should be at 0-opacity at Y-coordinate 500, then at y-coordinate 100 the opacity should be 20% (or .2)

Working Sample: http://jsfiddle.net/FzNrG/5/

$(window).scroll(function(){
    var opacity = 1- ( $(window).scrollTop() / $('#theDiv').height());
    if (opacity>1) opacity=1;
    if (opacity<0) opacity=0;

    //$('#debug').html('ScrollTop:' + $(window).scrollTop() + '<br>Opacity: ' + opacity);
    $('#theDiv').stop().fadeTo(250, opacity);    
});

Answer 2

$(window).scroll(function(){…});

is a good start... it fires whatever you want when you start a scroll. for example just put some .height(); in it to read elements height and if its below or higher of some number you want start .animate(); like the opacity... just play around a bit.

Answer 3

would suggest to read the source code of the linked page: (it's well commented too)

function slidingTitle() {
    //Get scroll position of window
    windowScroll = $(this).scrollTop();

    //Slow scroll of .art-header-inner scroll and fade it out
    $artHeaderInner.css({
       'margin-top' : -(windowScroll/3)+"px",
       'opacity' : 1-(windowScroll/550)
    });

    //Slowly parallax the background of .art-header
    $artHeader.css({
       'background-position' : 'center ' + (-windowScroll/8)+"px"
    });

   //Fade the .nav out
   $nav.css({
      'opacity' : 1-(windowScroll/400)
   });
}