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;
}