我在网站上有一个粘性页眉。但是当视口底部下方的内容非常特定（大约等于我的html上2-3倍的padding-top）时，如果尝试缓慢滚动，则滚动会上下振荡。如果页面下方有大量内容，则它会正常工作。
编辑： 抱歉，如果我的原始问题不够清晰，但我希望整个页面可以滚动，直到“页眉”到达屏幕顶部，然后（仅此时）让页眉停止滚动，而页面其余内容继续在其后面滚动。
这里是一个JSfiddle。
编辑： 抱歉，如果我的原始问题不够清晰，但我希望整个页面可以滚动，直到“页眉”到达屏幕顶部，然后（仅此时）让页眉停止滚动，而页面其余内容继续在其后面滚动。
这里是一个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>