help with scrolling sections of site under eachother

[suavedesign]

I am trying to make a section block on my website scroll on top of the section before it. This works with jquery, however, instead of scrolling slowly over the previous block, it covers it completely at once, and you can't read the first block. I tried adding a div called "space" between the two blocks, and giving it a height. This helps the problem, but you see that div coming up over the first block, and that's a problem.
Url: http://www.bnotchayaacademy.org/play/index2.php The section called #names (yellow) is the first black, and the section called "#location" is the second black.
jquery code:

$(window).scroll(function() {    



    var scroll = $(window).scrollTop();

    if (scroll >= 600) {
        $("#names").addClass("fixed");
    }

     else {
    $("#names").removeClass("fixed");
}


});

html:

<section id="names">

       <div class="names">
       <div class="pad">
       <div class="name"><div class="first">malky</div><div class="last">giniger</div></div>
       <div class="name"><div class="first">tova</div><div class="last">lew-kahn</div></div>
       <div class="name"><div class="first">zviah</div><div class="last">bittman</div></div>
       <div class="name four"><div class="first">miriam leah</div><div class="last">gamliel</div></div>
       <div class="chor">original choreography by maayan <span class="strong">davis</span> and hannah <span class="strong">stern</span></div>
       </div>
       </div>

 </section>
<div class="space"></div>

        <section id="location" data-type="background" data-speed="10">

       <div class="address"><img src="images/bca_play_location.jpg" width="100%" height="auto" border="0" alt="John Dewey Auditorium" /></div>

 </section>

css:

 #home .space{
    height:400px;
}


#home #names.fixed{
    position:fixed;
    width:100%;
    top:600px;
}

[mattster]

You control which elements appear above/below each other by z-index in CSS.

So if you wanted that yellow box on top, add to line 9 above: z-index: 100;. This will put it on top.

I'm struggleing to understand what sort of effect you want from this, because top:600px is very wierd. Do you want it at the top of your page or the bottom?. As you already have a pinned navbar, I suggest placing the names at the bottom. Change that top style to: bottom:0; to sort that.

This works fine in Chrome, only a large portion of the screen is taken up. To solve this, just adjust the padding/font size:

(styles shown here are the ones to change, dont remove anything!)

Line 285:
#home .names {
    padding: 10px 0;
}

Line 291:
#home .names .name, #pages.about .name { 
    margin: 0 50px 10px 0;
    font-size: 20px;
}

Line 313:
#home .names .name.four {
    margin: 0px 0 10px 0;
}

Line 325:
#home .names .chor {
    font-size: 18px;
}

You may wish to consider adding this line too:
section#copyright {
    padding-bottom: 100px;
}

That additional line is to make your copyright show up. You may want to 'unstick' that bar instead, but no where near as easy as adding one line of CSS!

Hope this sort of achieves what youre after!