Jquery 引导4-透明粘性导航条

我目前正在开发一个带有粘性导航的页面，但我的主要问题是我使用了多个以图像为背景的部分，导航当然是透明的。真正重要的是徽标位于导航上方，因此我必须使用

display:sticky（或
.sticky top
）。如何使其在每个部分都可见


html，
身体{
宽度：100%！重要；
}
身体{
背景：灰色！重要；
}
/*标题*/
.标志{
显示：内联块；
填充：1rem0.5rem0！重要；
}
/*导航栏*/
导航{
字号：13pt；
字体系列：“Cinzel”，无衬线；
填充：.3rem 0.3rem 0！重要；
文本转换：大写；
}
.导航链路{
颜色：#fff！重要；
利润率：0.25%0.25%；
}
.导航链接：悬停{
字体风格：下划线；
}
部分{
高度：100vh；
最小高度：900px；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
.文本{
利润率最高：20%；
}













我需要这段文字有响应性
Lorem ipsum dolor sit amet，奉献精英。发明人自由权是动物自由的权利，它是动物自由的权利，是动物自由的权利

诺芬

诺芬

创建一个名为transparent的css类，并使用此代码

.navbar .transparent .navbar-inverse .navbar-inner {
    background-color: rgba(92, 184, 92, 0.8);
}

和导航条形码：

<nav class="navbar fixed-top navbar-light navbar-toggleable-md navbar-inverse transparent">

.....

</nav>


.....
创建一个名为transparent的css类，并使用此代码

.navbar .transparent .navbar-inverse .navbar-inner {
    background-color: rgba(92, 184, 92, 0.8);
}

和导航条形码：

<nav class="navbar fixed-top navbar-light navbar-toggleable-md navbar-inverse transparent">

.....

</nav>


.....
以下是解决方案：

取出导航栏和徽标，并将其放置在所有部分上方。徽标和导航栏的高度为256px

因此，应用
margintop:-256px；填充顶部：256px到第一部分，您就完成了

页边距顶部：-256px
将第一部分向上移动256px，并
填充顶部：256px为其提供265像素的顶部填充。这使得整个东西看起来和以前一样，但现在你的导航栏和徽标标题独立于各个部分。这就是它起作用的原因

以下是完整的工作代码段（单击下面的“运行代码段”并展开到完整页面）：















我需要这段文字有响应性
Lorem ipsum dolor sit amet，奉献精英。发明人自由权是动物自由的权利，它是动物自由的权利，是动物自由的权利

第二节

第三节

以下是解决方案：

取出导航栏和徽标，并将其放置在所有部分上方。徽标和导航栏的高度为256px

因此，应用
margintop:-256px；填充顶部：256px到第一部分，您就完成了

页边距顶部：-256px
将第一部分向上移动256px，并
填充顶部：256px为其提供265像素的顶部填充。这使得整个东西看起来和以前一样，但现在你的导航栏和徽标标题独立于各个部分。这就是它起作用的原因

以下是完整的工作代码段（单击下面的“运行代码段”并展开到完整页面）：















我需要这段文字有响应性
Lorem ipsum dolor sit amet，奉献精英。发明人自由权是动物自由的权利，它是动物自由的权利，是动物自由的权利

第二节

第三节

谢谢您的回答，但如果我要使用“fixed top”，它将不在徽标下：/谢谢您的回答，但如果我要使用“fixed top”，它将不在徽标下：/我目前不太理解这个问题。你能解释一下：你到底想要达到什么样的行为？使用现有代码时当前有什么问题？感谢您回复@WebDevBooster。问题是，粘性菜单只在第一部分，如果