Jquery 滚动粘性标题跳跃

我正在创建一个标题，当用户向下滚动超过一定数量的像素时，该标题将保持不变。我的标题高121像素，但我想粘贴的标题部分是标题的底部42像素；这确实有效，但当它开始粘住时，页面会跳高约50像素

我对引起问题的原因的想法是

$（'#header'）.css（{position:'fixed'}）。我认为一旦
fixed
应用了内容，内容
div
就不再考虑边距。我试着在不同的位置上打球，但什么都不适合我

我创建了一个来更好地说明我的问题

JQUERY代码

$(window).scroll(function()
{
    if( $(window).scrollTop() > 79 )
    {
        $('#header').css({position: 'fixed'});
    } 
    else 
    {
        $('#header').css({position: 'static', top: '-79px'});
    }
});

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;
}

CSS代码

$(window).scroll(function()
{
    if( $(window).scrollTop() > 79 )
    {
        $('#header').css({position: 'fixed'});
    } 
    else 
    {
        $('#header').css({position: 'static', top: '-79px'});
    }
});

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>

标题
内容在这里
问题出在这里：

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

此问题有多个修复程序：

最简单的方法可能是添加另一个元素，它基本上占用了头部在位置改变时所占用的空间

为此，我将元素的显示更改为“block”，当标题为“fixed”时显示为“block”，当标题为“static”时显示为“none”

以下是更新的JSFIDLE：

HTML代码：

<div id="header">header</div>
<div id="header_placeholder"></div>
<div id="content">Content</div>

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;
}

$(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'});
}
});

JQuery代码：

<div id="header">header</div>
<div id="header_placeholder"></div>
<div id="content">Content</div>

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;
}

$(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'});
}
});

您是否注意到，与使用滚轮相比，单击并拖动滚动条效果良好？至少对我来说是这样。。。不确定这是否会指向一个问题。我也在使用Chrome。而且它似乎只发生在第一个卷轴上。如果我向上滚动然后向下滚动，它会工作。。。这很奇怪。我喜欢做怪异的工作：）嗯，这很奇怪。我用的是chrome浏览器，不管用哪种方式，我都会跳起来。我刚刚添加了
$（'#header'）.css（{position:'fixed'，top:'-79px'}）
添加到固定部分，它似乎停止了。起初，我尝试在粘性启动后为content div设置边距，但它开始更改标题的位置。我将
top:'-79px'
添加到固定部分，但对我来说没有任何改变。我相信这是一个简单的修复，需要一些小技巧，哈哈。对我来说，小提琴使整个头部保持静止，而不仅仅是底部灰色部分。除此之外，你说的很有道理。@defaultNINJA，你用的是什么浏览器？我试过了，它在我的Chrome版本中运行正常。我还认为我找到了一个解决方案，你们怎么看：@Mike，只要content div是唯一一个依赖于header div位置的div，那就应该很好了。我尝试了我想出的方法，但失败了，你的工作很完美。谢谢：）