Question

我正在尝试在我的固定顶部导航栏上方添加横幅。我环顾四周，了解了一些关于如何做到这一点的基本概念，但我的例子有点复杂，我有点失落。

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

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

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

导航栏：

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

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

如果您有这样的静态导航栏，则必须在主体上添加顶部填充以将正文内容推送到横幅下方。现在突然之间，我需要将身体内容降低70px。不确定是否有一种很好的方法可以动态地实现这一点。
我在最顶部的导航栏下方有另一个静态导航栏。当我将最顶部的导航栏向下移动20px时，我需要将此另一个导航栏向下移动20px。不幸的是，这个较低的导航也固定在顶部：50px，将它放在上部导航栏的正下方。

我这里有一个能够证明这个问题的傻瓜。而且我不确定从哪里开始。可能必须在javascript中弄乱一些东西，但我想尽量避免这种情况，以避免在页面加载时出现问题。

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

Answer 1

我看着你的傻瓜。我对您的CSS和HTML进行了一些更改，以实现您的目标。我对HTML所做的更改是正文标记。新标签如下所示：

<body ng-controller="MainController" ng-class="{'bodyModified': banner == true}">

新的CSS文件如下所示：

body {
  padding-top: 50px; Need this to move down body under fixed header
}

.bodyModified {
  padding-top: 20px;
}

.settings-nav {
    position: relative;
    right: 0;
    left: 0;
    background-color: #E2E2E2;
    z-index: 1029;
    top:0px;
}

.settings-content {
    padding-top: 70px;
}

.top-banner-nav {
    position: relative;
    margin: 0;
    height: 20px;
}

.top-banner {
    position: fixed;
    right: 0;
    left: 0;
    top:0;
    margin-bottom: 0px;
    background-color: #FFFF00;
}

您也可以使用javascript和jQuery来完成此任务。希望有所帮助。让我知道它是怎么回事。

这是一个展示变化的傻瓜

http://plnkr.co/edit/39LhQA2gdMremnTOGXe4?p=preview

Answer 2

您可以尝试使用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()。

希望这有帮助。

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

2 个答案: