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

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

Function that returns a formatted array in VBA -