在Bootstrap固定导航栏上方和下方添加元素

Question

在Bootstrap固定导航栏上方和下方添加元素

5

我正在尝试在我的固定顶部导航栏上方添加一个横幅。我已经查看了一些基本概念，知道如何做到这一点，但我的示例有点复杂，我有点迷失。

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

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

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

导航栏：

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

这样可以很好地将静态导航栏向下推20px，如果有横幅的话。但是我有两个问题：

当你像这样拥有一个静态导航栏时，你必须在body中添加一个顶部padding来将主体内容推到横幅下方。现在突然间，我需要将主体内容向下推70px。不确定是否有一种好的方法使这个过程动态化。
我有另一个静态导航栏直接位于最顶部的导航栏下面。当我将最顶部的导航栏向下移动20px时，我也需要将这个其他导航栏向下移动20px。不幸的是，这个较低的导航栏也是固定的，其top属性为50px，以便将其放置在上部导航栏的正下方。

我在这里有一个示例，演示了这个问题。我真的不知道该怎么办了。可能需要在javascript中进行调整，但我想尽可能避免这种情况，以避免页面加载时出现跳动。 http://plnkr.co/edit/DYYMz1?p=preview

- lostintranslation

2个回答

0

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

希望这可以帮到你。

- chiragchavda.ks

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sohrab Hejazi · Accepted Answer

我看了你的plunker。我对你的CSS和HTML进行了一些修改，以实现你想要的效果。我对HTML所做的更改是body标签。新标签如下：

<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来完成这个任务。希望能对你有所帮助，让我知道进展如何。

这里有一个Plunker演示了这些变化。 http://plnkr.co/edit/39LhQA2gdMremnTOGXe4?p=preview