在 bootstrap 固定导航栏上方和下方添加内容

Question

我正在尝试在固定顶部导航栏上方添加横幅。我环顾四周并了解了一些有关如何执行此操作的基本概念，但我的示例有点复杂，而且我有点迷茫。

用户可以在我的页面顶部添加自定义横幅。如果发生这种情况，我需要将所有内容（包括固定导航栏）向下推至横幅的高度（例如 20 像素）。

我创建了一个可以应用于 nav 元素的类：

.top-banner-nav {
  top: 20px;
}

导航栏：

  <nav class="navbar navbar-default navbar-fixed-top" ng-class="{'top-banner-nav': banner == true}">

如果有横幅，那么将静态导航栏向下推 20px 效果很好。但是我有问题。

1. 当您有一个像这样的静态导航栏时，您必须向正文添加顶部填充以将正文内容推送到横幅下方。现在突然间我需要将正文内容向下推 70 像素。不确定是否有一种很好的方法可以动态地实现这一点。

2. 我在最顶部导航栏的正下方有另一个静态导航栏。当我将最顶部的导航栏向下移动 20 像素时，我也需要将另一个导航栏向下移动 20 像素。不幸的是，这个下部导航也与 top: 50px 一起固定，以将其放置在上部导航栏的正下方。

我这里有一个 plunker 来演示这个问题。而且我真的不确定从这里去哪里。可能不得不弄乱javascript中的东西，但我想尽量避免这种情况，以避免在页面加载时出现跳跃。

http://plnkr.co/edit/DYYMz1?p=preview

Answer 1

你可以尝试 jquery 解决方案。例如，如果你使用top-nav-fixed-banner类，你可以编写类似这样的代码。

function fixBannerHeight(){
    var bannerHeight = $(".top-banner-div").height();
    $(".top-nav-fixed-banner").each(function(e){
          var height = $(this).height();
          bannerHeight = bannerHeight  + height;                
    })
    $('.top-banner-div').css({"height":bannerHeight+"px"});
}

fixBannerHeight()当您添加动态横幅时调用。

希望这可以帮助。