Sticky Header Scroll故障

时间:2013-04-09 14:59:27

标签: javascript html

我的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的高度。(因此它会产生一个看起来不太平滑的太大跳跃)

1 个答案:

答案 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'
            });
        }
    });
});