javascript - 滚动后修复导航栏并平滑滚动下方的内容

Question

我正在使用 Twitter Bootstrap's Affix plugin向下滚动 80px 后将我的导航栏固定到顶部。现在这使得导航栏 CSS 成为

position:fixed;
top:0;
left:0

由于导航栏的位置固定并且元素不再是 DOM 的一部分，因此一旦导航栏固定，页面内容就会在导航栏下方滑动。为了解决这个问题，我尝试使用 JavaScript 在滚动 80 像素后向内容容器添加一个 margin-top 等于导航栏的高度。

这是我的 JS 代码

$(window).scroll(function() {
    var height = $(window).scrollTop();

    if(height >= 80) {
        $('.content-container').css('margin-top', '44px');
    } else {
        $('.content-container').css('margin-top', '0px');
    }
});

现在这按预期工作，但是当页面正在加载并且 Bootstrap javascript 文件仍在下载时，导航栏在滚动后不会固定到顶部，这会带来“故障”体验。是否有仅使用 CSS 来解决此问题的方法？

Answer 1

我一开始就在标题中使用了 position:absolute，因为这也将它从流程中移除，所以我可以从一开始就考虑到这一点，并通过 margin 。