jQuery 滚动粘性标题跳跃
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17842304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling sticky header jumping
提问by Mike
I'm creating a header that'll stick in place when the user scrolls down past a set amount of pixels. My header is 121 pixels high, but the part of the header I want to stick is the bottom 42 pixels of the header; which does work, but at the point it begins to stick the page jumps up about 50 pixels.
我正在创建一个标题，当用户向下滚动超过一定数量的像素时，该标题将固定到位。我的页眉高 121 像素，但我要粘贴的页眉部分是页眉底部 42 像素；这确实有效，但在它开始粘住页面时，页面会向上跳约 50 像素。
My thought on what could be causing the issue is $('#header').css({position: 'fixed'});. I think once fixedis applied the content, the content divno longer takes the margin into account. I've tried to play around with the different positions, but nothing has worked out for me.
我对可能导致问题的原因的想法是$('#header').css({position: 'fixed'});。我认为一旦fixed应用了内容，内容div就不再考虑边距了。我试图在不同的位置上玩，但对我来说没有任何效果。
I created a JSFIDDLEto better illustrate my issue.
我创建了一个JSFIDDLE来更好地说明我的问题。
JQUERY CODE
查询代码
$(window).scroll(function()
{
if( $(window).scrollTop() > 79 )
{
$('#header').css({position: 'fixed'});
}
else
{
$('#header').css({position: 'static', top: '-79px'});
}
});
CSS CODE
代码
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
HTML
<div id="header">header</div>
<div id="content">content goes here</div>
回答by Harrison
Here is the problem:
这是问题所在：
When the header has a "static" positioning, it pushes the content down so it does not overlap with it. When the positioning changes from "static" to "fixed", it no longer cares whether it overlaps with the content so the content "jumps up" to the top of the page because it thinks there is nothing in it's way.
当标题具有“静态”定位时，它会将内容向下推，使其不与其重叠。当定位从“静态”变为“固定”时，它不再关心是否与内容重叠，因此内容“跳”到页面顶部，因为它认为它没有任何东西。
There are multiple fixes to this problem:
此问题有多种修复方法：
The easiest one is probably to add another element that essentially takes up the space that the header did when the positioning changes.
最简单的方法可能是添加另一个元素，该元素实质上占用了标题在定位更改时所做的空间。
I did this by changing the display of the element to "block" when the header is "fixed" and "none" when the header is "static"
我通过在标题为“固定”时将元素的显示更改为“阻止”而在标题为“静态”时将元素的显示更改为“无”来做到这一点
Here is an updated JSFiddle: http://jsfiddle.net/6kPzW/2/
这是更新的 JSFiddle：http: //jsfiddle.net/6kPzW/2/
HTML Code:
HTML代码：
<div id="header">header</div>
<div id="header_placeholder"></div>
<div id="content">Content</div>
CSS Code:
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 Code:
查询代码：
$(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'});
}
});
