javascript - Having a html element stay in the same position without using position: fixed -
to show want do, here url. http://octopuscreative.com .
i want when scroll down height, cyan div disappears website above.
i have scrolling working in code, however, cannot see rest of html below #main div. don't know if has new #slideshow div (with fixed position). thought since #slideshow div had height
reduced 0
, able see html underneath #main div, see below white.
var header = $('#slideshow'), headerh = header.height(); $(window).scroll(function() { if (header.height() >= 0) { header.css({ height: -($(this).scrolltop() - headerh), position: 'absolute' }); } else if (header.height() < 0 ) { header.css('height', 0); header.css('position', 'absolute'); } }); </script> </head> <body> <div id="top"> <div id="stallion"> <img id="stallionpic" src="stallion1.png" /> <h1 class="h1">stallion stride</h1> <div id="navigation"> <ul> <li><a href="google.com" id="first">home</a></li> <li><a href="">about</a></li> <li><a href="">register</a></li> <li><a href="" id="last">contact us</a></li> </ul> </div> </div> </div> <div id="main"> <div id="slideshow"> <div id="leftbutton"></div> <div id="rightbutton"></div> <div id="slideshownav"> <ul> <li><a class="active"></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </div> <div id="slideshow_inner"> <li id="pic1"><a><img src="pic2.jpg" /></a></li> <li id="pic2"><a><img src="pic1.jpg" /></a></li> <li id="pic3"><a><img src="pic3.jpg" /></a></li> <li id="pic4"><a><img src="pic4.jpg" /></a></li> </div> <p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p> </div> <div id="maincontent"> <p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p> </div> </div> <div id="footer"> </div> </body>
i'm lead dev @ octopus. here's bare minimum amount of code make header effect work (it use fixed position).
html
<div id="hero"> <h2>i hero</h2> </div> <div id="main-content"> <h3>i main content</h3> </div>
css
* { margin: 0; } div#hero { position: fixed; top: 0; left: 0; width: 100%; background: #3d6aa2; height: 300px; } div#main-content { height: 1500px; background: #fff; margin-top: 300px; position: relative; z-index: 1; }
i threw jsfiddle demonstrates it, along bit of parallax stuff site does: http://jsfiddle.net/paulstraw/fw4ff/
hope helps!
Comments
Post a Comment