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

时间:2015-02-12 00:03:44

标签: javascript jquery html css twitter-bootstrap

在向下滚动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解决了这个问题?

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

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