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.
$("body").css("margin-top", 60);
and it fixed the issue. Thanks everyone! Can someone add an answer so that I can accept it.