【发布时间】：2015-01-14 17:36:50
【问题描述】：
我在网站上有一个粘性标题。但是，当视口底部下方有非常特定数量的内容（大约等于我的 html 上的 2-3x padding-top）时，如果尝试缓慢滚动，则滚动会上下摆动。如果页面下方有大量内容，效果很好。
编辑： 抱歉，如果我的原始问题不够清楚，但我希望整个页面滚动，直到“标题”到达屏幕顶部，然后（并且只有这样）标题停止滚动，而页面的其余内容继续在它后面滚动。
这是JSfiddle
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true));
} else {
$('#stickyheader').css({
position: 'static',
top: '0px'
});
$('#othercontent').css('margin-top', '0px');
}
});
});body {
font: 13px sans-serif;
padding-top: 20px;
}
#stickyheader {
width: 100%;
height: 40px;
background:black;
color:white;
margin-bottom: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stickyheader">Sticky header</div>
<div id="othercontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>【问题讨论】：
-
对我来说似乎坏了 ↑
-
他缺少 jQuery 和
<div>元素...现在应该可以工作了。 -
我要试试这个...一定很简单，我只是看不到它
-
我似乎无法重现提到的振荡。您在哪个浏览器中看到这个？另外，这个问题还有一些其他方法可以达到同样的效果stackoverflow.com/questions/5902822/…
-
@JamesMontagne 我现在在 OSX 10.9 以及其他浏览器上运行的 Firefox 35 上看到了这一点。您是否尝试过“运行代码片段”？由于屏幕尺寸不同，它通常不会出现在 JSFiddle 上。