根据滚动位置淡入和淡出某些DIV

Question

The basic problem I'm having is that I'd like to fade in and out particular divs based on the user's current vertical location on the page. Getting the 1st div to fade in when scrolling down is easy, as is getting it to fade out when I go back to the top of the page. I'm guessing I need to use come kind of greater than, less than scrollTop javascript to establish the limits of each.

Here's the javascript I've been using so far:

if(scrollTop > 500) {
$("#Project-Desc, #Aqueous-Desc").fadeIn('slow');}
if(scrollTop < 500) {
$("#Project-Desc").fadeOut('slow');}

Here's my site to establish what exactly I'm trying to do:

http://luke-keller.com/test2/

You'll see that the small gray box that fades in will contain project descriptions, and that's where I need to fade out old content and fade in new content based on the scroll position or the like.

Thanks!

PS - Additional HTML

<div id="Portfolio">

    <div id="Port-Position">

        <div id="Aqueous" class="Projects">
            <div class="Project-Spacer">
            </div>
            <img src="Images/Projects/AqueousModel.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/AqueousPlan.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/AqueousModel.jpg" width="600" height="400" border="0" alt=""/>
            </div>

            <div class="Project-Divider">
            </div>

            <div id="Townhouse" class="Projects">
            <div class="Project-Spacer">
            </div>
            <img src="Images/Projects/townhousePlan.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/townhouseModel.jpg" width="600" height="400" border="0" alt=""/>
            <img src="Images/Projects/townhousePath.jpg" width="600" height="400" border="0" alt=""/>
            </div>

      </div>
   </div>

        <div id="Project-Desc">

            <div id="Aqueous-Desc" class="Desc">
                <h2>AQUEOUS</h2>
                <p><h4>2006 - Temple University</h4></p>

                <div class="Desc-Body">
                Aqueous, meaning of water, is a blah blah blah more text here blah blah blah sweet awesome. Minecraft. Love that stuff.
                </div>

                <div class="Desc-Footer">
                Clay Prototype, Handrawn Plan on Vellum, Foamcore Model.
                </div>

             </div>

             <div id="Townhouse-Desc" class="Desc">
                <h2>TOWNHOUSE</h2>
                <p><h4>2006 - Temple University</h4></p>

                <div class="Desc-Body">
                Aqueous, meaning of water, is a blah blah blah more text here blah blah blah sweet awesome. Minecraft. Love that stuff.
                </div>

                <div class="Desc-Footer">
                Clay Prototype, Handrawn Plan on Vellum, Foamcore Model.
                </div>

             </div>

</div>

NOTE: The Project Description, the box I'm getting to fade in and out, is a fixed position element if that makes any difference.

Answer 1

This was very helpful. I made a few modifications that I find help with easing the transitions between elements when the user scrolls quickly.

Something like

     if( y > (600) && y < (1900) ){
        $("#Aqueous-Desc").fadeIn('slow');
     }else{
        $("Aqueous-Desc").fadeOut("slow");
     }

This binds the opacity content to the range set in the if statement so if you're ever out of bounds it will fade out.

Answer 2

I think I have the answer. I welcome any and all who have any suggestions regarding this code, but essentially you need to find the scroll position of the window, and insert fade in and fade outs based on certain parameters (where the position is greater than x but less than y, fade in #mydiv). I coded a few below and have plenty more to go.

$(window).scroll(function(){
  // gets the position of the window
          var y = $(window).scrollTop();

            if( y < (600) ){
            $(".Desc").fadeOut('slow');}

          if( y > (600) && y < (1900) ){
            $("#Aqueous-Desc").fadeIn('slow');}
          if( y > (1900) ){
            $("#Aqueous-Desc").fadeOut('slow');}
          if( y < (600) ){
            $("#Aqueous-Desc").fadeOut('slow');}


            if( y > (2100) && y < (3300) ){
                $("#Townhouse-Desc").fadeIn('slow');}
            if( y > (3300) ){
                $("#Townhouse-Desc").fadeOut('slow');}
            if( y < (2100) ){
                $("#Townhouse-Desc").fadeOut('slow');}


            if( y > (3500) && y < (4700) ){
                $("#Poley-Desc").fadeIn('slow');}
            if( y > (4700) ){
                $("#Poley-Desc").fadeOut('slow');}
            if( y < (3500) ){
                $("#Poley-Desc").fadeOut('slow');}