我正在创建一个标题,当用户向下滚动一定数量的像素时,它将固定在原位。我的标题高度为121个像素,但我想要固定的部分是标题底部的42个像素; 这确实可以工作,但在它开始固定的那一点上,页面会向上跳大约50个像素。
我认为导致问题的原因是$('#header').css({position: 'fixed'});
。 我认为一旦应用了fixed
,内容div
不再考虑边距。 我尝试过尝试使用不同的位置,但对我来说没有什么作用。
我创建了一个JSFIDDLE以更好地说明我的问题。
JQUERY CODE
$(window).scroll(function()
{
if( $(window).scrollTop() > 79 )
{
$('#header').css({position: 'fixed'});
}
else
{
$('#header').css({position: 'static', top: '-79px'});
}
});
CSS 代码
body {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 121px;
background: url(http://libertyeaglearms.com/dev/admin/graphics/header-bg.png);
}
#content {
margin: 10px auto;
width: 300px;
min-height: 600px;
}
HTML
<div id="header">header</div>
<div id="content">content goes here</div>
$('#header').css({position: 'fixed', top: '-79px'});
,现在似乎已经停止了。 - Iron3eagletop: '-79px'
,但对我来说没有任何变化。我相信这是其中一个需要一些小技巧的简单修复方法,哈哈。 - Mike