Thu, 2014-10-30 14:44
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:
malky
giniger
tova
lew-kahn
zviah
bittman
miriam leah
gamliel
original choreography by maayan davis and hannah stern
css:
#home .space{
height:400px;
}
#home #names.fixed{
position:fixed;
width:100%;
top:600px;
}
Thu, 2014-10-30 14:46
#1
Revised html code: (previous
Revised html code: (previous code was not inserted correctly)
<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>