Question

在向下滚动80px后，我正在使用Twitter Bootstrap's Affix plugin将导航栏修复到顶部。现在这使导航栏CSS变为

position:fixed;
top:0;
left:0

由于导航栏固定位置且元素不再是DOM的一部分，因此只要导航栏被粘贴，页面内容就会在导航栏下方滑动。为了解决这个问题，我尝试使用JavaScript，在滚动80px后将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');
    }
});

现在这可以正常工作但是在加载页面并且仍在下载引导程序的javascript文件时，导航栏在滚动后不会固定到顶部，这会给出“毛病”的体验。是否只使用CSS解决了这个问题？

Answer 1

我首先在我的标题上使用position:absolute，因为这也将其从流程中取出，因此我可以从一开始就考虑到这一点，并通过边距保留以下内容。

Answer 2

也许你可以将“导航栏”包装在一个最小高度为div的div中：44px？

滚动后修复导航栏并平滑滚动下面的内容

2 个答案: