粘页眉滚动错误答案

【问题标题】：Sticky Header Scroll misfunction粘页眉滚动错误
【发布时间】：2013-04-10 03:41:16
【问题描述】：

我的 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 的高度。（所以它会跳得太大，看起来不流畅）

【问题讨论】：

当然会发生这种情况，因为当#outer-header 设置为fixed 时，它不会影响页面布局的其余部分——但是一旦您将其更改为static，它就会开始这样做。您应该在fixed 和absolute 之间切换以避免这种情况。（可能需要更多修改。）
非常感谢！我现在终于解决了这个问题：D

标签： javascript html

【解决方案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'
            });
        }
    });
});

【讨论】：