就像我的标题所说的那样,当导航栏到达页面顶部时,我的粘性标头导致随后的div跳大约100像素。就像home div神奇地丢失了其高度的100像素。我已经尝试了几件事,但是还无法使它正常工作。
我添加了用于平滑滚动的插件,但是无法在jsfiddle中正常工作。如果在导航栏到达页面顶部时缓慢向下滚动,则会发现跳过。
谢谢你的帮助!
http://jsfiddle.net/g9N78/2/
这是我用于粘性标头的代码:
<script>
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#nav").offset().top;
var s = $(".nav");
if(st > ot) {
s.css({
position: "fixed",
top: "0",
background: "rgba(0,0,0,0.65)"
});
} else {
if(st <= ot) {
s.css({
position: "",
top: "",
background: "black"
});
}
}
};
$(window).scroll(move);
move();
}
</script>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
最佳答案
由于您要从DOM流中删除该对象,因此空间是可用的,并且下面的元素可以使用它,因此您可以像这样向margin
添加一些#home
:
$('#home')。css('marginTop','100px');
检查此演示http://jsfiddle.net/g9N78/3/