我创建一个标题,当用户向下滚动一定量的像素时,它将粘贴到位.我的标题是121像素高,但是我要粘贴的标题的部分是标题的底部42像素;这是有效的,但是在它开始粘贴页面跳跃约50像素点.
我的想法可能是导致这个问题的是$(‘#header’).css({position：’fixed’});.我认为一旦固定了内容,内容div就不再考虑利润.我试图用不同的位置玩耍,但没有为我做好准备.
我创建了一个JSFIDDLE来更好地说明我的问题.
查询代码
$(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>
解决方法
这是问题：
当标题具有“静态”定位时,它会将内容向下推,使其不与其重叠.当定位从“静态”变为“固定”时,它不再关心它是否与内容重叠,因此内容“跳转”到页面的顶部,因为它认为没有任何方式.
这个问题有多种修复方法：
最简单的一个可能是添加另一个元素,这个元素基本上占据了头部在定位更改时所做的空间.
当头是“固定的”,当头是“静态的”时,通过将元素的显示改变为“块”来做到这一点
这是一个更新的JSfiddle：http://jsfiddle.net/6kPzW/2/
HTML代码：
<div id="header">header</div> <div id="header_placeholder"></div> <div id="content">Content</div>
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;
}
#header_placeholder {
height:121px;
width:100%;
display:none;
}
JQuery代码：
$(window).scroll(function()
{
if( $(window).scrollTop() > 79 )
{
$('#header').css({position: 'fixed'});
$('#header_placeholder').css({display: 'block'});
}
else
{
$('#header').css({position: 'static',top: '-79px'});
$('#header_placeholder').css({display: 'none'});
}
});