我发现有几个类似的问题,但是都不能帮助我。当我滚动页面时,标题/导航栏与页面不会“平稳”移动。在我到达页面下方的一定位置后,标题会“跳跃”,但之后就没问题了。 我有以下代码用于固定标题:
$(window).scroll(function(){
if ($(window).scrollTop() >= 147) {
$("#top_nav").addClass("fixed");
$("#top_nav").css("position", "fixed");
$("#top_rule").hide();
$("#bottom_rule").hide();
}
else {
$("#top_nav").removeClass("fixed");
$("#top_nav").css("position", "initial");
$("#top_rule").show();
$("#bottom_rule").show();
}
});
我的CSS:
.fixed {
width: 100%;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0px;
padding-top: 15px;
padding: 10px;
}
我在CSS中没有使用
position: fixed
,因为由于某种原因它无法正常工作,所以我使用了jQuery来设置固定位置。我已经将页面的其余部分发布在jsfiddle.net上
http://jsfiddle.net/5n4pF/ 如果我的解释不清楚,请问我并尝试更好地解释 :)
提前致谢
编辑: 当到达147px时,它不能跳跃。它看起来像是“隐藏和显示”。相反,它必须随着页面向下滚动平稳移动。