我正在尝试在我的固定顶部导航栏上方添加一个横幅。我已经查看了一些基本概念,知道如何做到这一点,但我的示例有点复杂,我有点迷失。
用户可以向我的页面顶部添加自定义横幅。如果发生这种情况,我需要将所有内容(包括固定导航栏)向下推移横幅的高度(比如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,以便将其放置在上部导航栏的正下方。