我在使用jQuery制作固定头部时遇到了一个具体的问题。我尝试了网络上常用的代码片段,但是发现无论在哪里都会出现同样的错误。
在特定的文档高度(可滚动直至略微超过粘性效果调用),固定头部会在 position: fixed
和 position: static
之间跳转。
HTML:
<header>
<div id="not-sticky"></div>
<div id="sticky"></div>
</header>
<div id="content"> ...
jQuery:
var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
windowTop = $(window).scrollTop();
if (windowTop > stickyTop) {
$sticky.css({
position: 'fixed',
top: 0
});
}
else {
$sticky.css({
position: '',
top: ''
});
}
});
CSS:
header {
width: 100%;
}
#not-sticky {
padding: 50px 0;
width: 100%;
}
#sticky {
padding: 24px 0;
position: relative;
width: 100%;
z-index: 25;
}
我还尝试了在#not-sticky
上添加与#sticky
相同高度的下边距,以保持文档高度不变,但仍然出现了同样的抖动效果。
有什么办法可以解决这个问题吗?
DOM ready
、window load
或者任何需要的地方使用它。你知道,图片加载速度很慢,重新检查滚动值可能会很有用,因为页面有时候可能已经被滚动过了。 - Roko C. Buljan