1 reply [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 43 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

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

John Dewey Auditorium

css:
#home .space{
height:400px;
}

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

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 3 years 43 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

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>