As you scroll down, the top bar goes up and the moment the top bar gets out of sight, the header gets set to position: fixed;. The moment this happens, the content below takes a massive jump upward with 1 scroll wheel click.
I'm assuming its probably something simple I'm overlooking, but wanted to check to see if someone else saw the issue. I've looked through it, but can't really see whats happening right off.
I've set up a jsfiddle to show this code in full.
$(document).ready(function() {
var s = $("#header");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
//$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
CSS:
#header { float: left; width: 100%; height: 60px; background: #fff; }
#header_left { float: left; display: inline; width: 650px; height: 100px; }
#header_right { float: right; display: inline; width: 200px; height: 100px; text-align: right; }
.stick {
position:fixed;
top:0px;
/*_top: expression( ie6 = (document.documentElement.scrollTop + "px") );*/
z-index: 1000;
}
If you get to the position where the header gets set to fixed, and click up and down, you'll see where the content below is jumping more than 1 click.
When you set an element to Position Fixed, it stops taking space anymore from the document since it will be like-floating around. Therefore the rest of DOM will jump up as if that element was suddenly deleted.
Add an empty div and before you set Position to Fixed, fill in that div with empty space, or allocate more space for document to occupy.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments