我正在尝试在我的固定顶部导航栏上方添加一个横幅。我环顾四周并了解了一些关于如何执行此操作的基本概念，但我的示例有点复杂，我有点迷路了。
用户可以在我的页面顶部添加自定义横幅。如果发生这种情况，我需要将所有内容(包括固定的导航栏)向下推到横幅的高度(比如 20 像素)。
我已经创建了一个可以应用于导航元素的类:
.top-banner-nav {
top: 20px;
}
导航栏:
<nav class="navbar navbar-default navbar-fixed-top" ng-class="{'top-banner-nav': banner == true}">
如果有横幅，将静态导航栏向下推 20 像素效果很好。但是我有问题。
当您有一个像这样的静态导航栏时，您必须向正文添加顶部填充以将正文内容推到横幅下方。现在突然间我需要将正文内容向下推 70 像素。不确定是否有好的方法可以动态地实现这一点。
我在最顶部的导航栏正下方有另一个静态导航栏。当我将最顶部的导航栏向下移动 20px 时，我也需要将另一个导航栏向下移动 20px。不幸的是，这个较低的导航栏也被固定为 top: 50px 以将其放置在上部导航栏的正下方。
我这里有一个 plunker 可以证明这个问题。而且我真的不确定从这里去哪里。可能必须弄乱 javascript 中的东西，但我想尽量避免这种情况，以避免在页面加载时跳来跳去。
最佳答案
我看着你的笨蛋。我对您的 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
关于angularjs - 在 bootstrap 固定导航栏上方和下方添加内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30825944/