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

我使用Twitter Bootstrap's Affix plugin在向下滚动80px后将导航栏修正为顶部。现在，这使得导航栏CSS来修复滚动后的导航栏并平滑滚动下面的内容

position:fixed; 
top:0; 
left:0

由于导航栏获取固定的位置和元素一旦被导航栏中贴不是DOM的一部分了，导航栏下面的页面内容的幻灯片。为了解决这个问题，我尝试使用JavaScript，在滚动80px之后添加一个margin-top等于导航栏高度的内容容器。

以下是一个

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

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

现在我的JS代码可正常工作，但同时页面的载入和JavaScript文件仍然被下载的引导，导航栏不会被固定在顶部滚动后，这给了一个'glitchy'的经验。有没有解决这个问题只使用CSS？

来源

2015-02-12 Yin Yang

我不确定我是否理解这个问题。你是不是想将内容显示在贴上的导航栏下？否则，内容将覆盖您的导航栏，并且人们无法看到它。 – 2015-02-12 00:08:25

我认为这是更好的解决方法，确保你的js按正确的顺序加载。我会使用AMD加载程序来确保在启动代码之前加载启动程序。 – 2015-02-12 00:09:09

@AlexanderBird我希望内容出现在贴上的导航栏下。但是，只要导航栏被粘贴，内容突然跳到导航栏下面，等于附加的导航栏的高度（因为它不再是DOM的一部分）。 – 2015-02-12 00:12:21

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

来源

2015-02-15 13:28:24

也许你可以用一个最小高度为44px的div来包装“navbar”？

来源

2015-02-12 01:03:07

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

回答

相关问题