Question

我正在创建一个标题，当用户向下滚动超过一定数量的像素时，它会固定到位。我的标题是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>

Answer 1

问题在于：

当标题具有“静态”定位时，它会向下推动内容，使其不与之重叠。当定位从“静态”变为“固定”时，它不再关心它是否与内容重叠，因此内容“跳起”到页面顶部，因为它认为没有任何内容。

此问题有多种解决方法：

最简单的一个可能是添加另一个元素，它基本上占用了标题在定位发生变化时所做的空间。

我是通过在标题为“固定”时将元素的显示更改为“阻止”而在标题为“静态”时将其更改为“无”

这是一个更新的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'});
}
});

滚动粘性标题跳跃

1 个答案: