javascript - スティッキー ヘッダー スクロールの誤動作

Question

ウィンドウの上部に到達するとスティッキーになるヘッダーの次のコードがあります。

$(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 の高さをスクロールします (したがって、滑らかに見えない大きすぎるジャンプが発生します)。

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