我的Header代码如果到达窗口顶部会变粘:
$(function () {
var stickyHeaderTop = $('#outer-header').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#outer-header').css({
position: 'fixed',
top: '-300px'
});
} else {
$('#outer-header').css({
position: 'static',
top: '0px'
});
}
});
});
它可以工作,但是当它到达顶部并变得粘滞时,内容会滚动正常滚动+在标题上方的div的高度。(因此它会产生一个看起来不太平滑的太大跳跃)
答案 0 :(得分:0)
感谢CBroe的暗示! 这是一个有效的解决方案:
$(function () {
var stickyHeaderTop = $('#outer-header').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >= stickyHeaderTop) {
$('#outer-header').css({
position: 'fixed',
top: '-300px'
});
$('#main').css({
position: 'relative',
top: '332px'
});
} else {
$('#outer-header').css({
position: 'absolute',
top: '0px'
});
$('#main').css({
position: 'relative',
top: '332px'
});
}
});
});