粘页眉滚动功能异常

Question

我的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'
            });
        }
    });
});

它可以工作，但是当它到达顶部并变得发粘时，内容将滚动正常滚动+超过Header的div的高度（因此它会跳得太大，看起来不太平滑）

Answer 1

感谢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'
            });
        }
    });
});