overlapping - force scrollbar itself to stop moving upwards (fake limit) while the div is still being scrolled up. -
jsfiddle: http://jsfiddle.net/2ezq9/2/
on site, using nicescroll3 have scrollbar within container div pulling data ajax. problem this: when scroll top of container div, scrollbar continues scroll under header , top of container. normal, know, scrollbar stop @ bottom of header when container finishes scrolling. basically, want scrollbar stop top-margin same height of header (i.e.: not overlap header). have searched endlessly , cannot find solution online. thank in advance!
html
<div id="wrapper"> <div id="header">sticky header</div> <div id="content">content <br />content<br />content<br />content <br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content <br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br />content<br /> </div> <div class="push"></div> </div> css
#wrapper { padding: 0; height: auto; !important; position: relative; margin: 0; width: 100%; top:0; } #header { position: fixed; z-index: 1; margin: 0; padding: 0; left: 0; height: 40px; width: 100%; background-color: blue; } #content { padding: 5px; padding-top: 44px; filter: alpha(opacity=50); max-width: 1105px; border: 1px solid #333333; margin-right: auto; background:#252525; }
if understand question correctly use jquery scroll event , not let pass height of header this: http://jsfiddle.net/2ezq9/4/
$(window).scroll(function () { if ($(this).scrolltop() < 58) { $(this).scrolltop(58); } }); 
Comments
Post a Comment