Javascript 粘性收割台滚动故障

我的标题有以下代码，如果它到达窗口顶部，就会变得很粘：

$(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的高度。（因此它跳得太大，看起来不平滑）

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

---

当然会发生这种情况，因为

#外部页眉

设置为

固定

时不会影响页面布局的其余部分，但一旦将其更改为

静态

，它就会开始影响页面布局的其余部分。您应该在

fixed

和

absolute

之间切换以避免这种情况。（可能需要更多的修改）非常感谢！我现在解决了这个问题，finnaly:D