Bootstrap 4 我能'；t使粘性顶部导航条与下一个元素引导4重叠

编辑：所需效果的示例

第二次编辑：答案其实很简单，我之前曾将页眉和页脚分割成一个单独的文件，并意外地将导航栏放置在body标记之外。一旦我把它移到里面，在body标签中设置我的背景，然后对导航栏使用带有属性rgba（5,5,5,0.5）的背景颜色选择器，一切都很好

正如你所看到的，我有一个导航栏和一个横幅。目前我正在为navbar使用sticky顶级。导航栏是透明的

我希望导航栏跟随我进入页面，因为这是一个单页面设计，导航栏是散列链接。但是，我还希望导航栏与下一个元素重叠并居中（就像我说的：透明）。页面应该从下一个元素中背景图像的顶部开始，导航栏重叠

我尝试了位置：绝对，它确实降低了导航栏，但它是固定的，一直向左

我还尝试了thread中的建议，建议在导航栏中添加一个自定义类，并增加top元素，如下所示：

.sticky-offset {
top: 56px;
}

但是，这只会将其永久向下推，并且在下一个元素上方仍有一个空白。然后我试着缩小体型，但也没用

我还尝试将overflow:auto添加到navbar类中，但没有任何效果

这是我的html：

  <div id="navbar-main" class="navbar sticky-top sticky-offset navbar-
 expand-md navbar-light px-auto mx-auto">

 <!-- <a class="navbar-brand" href="#">Navbar</a> -->

  <button class="navbar-toggler" type="button" data-toggle="collapse" 
 data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 
aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse justify-content-center" 
id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
    <a class="nav-item nav-link active" href="#section-banner">Home<span 
class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
    <a class="nav-item nav-link" href="#section-timeline">Our Journey</a>
  </li>
  <li class="nav-item">
    <a class="nav-item nav-link" href="#section-gallery">Party 
Photos!!!</a>
  </li>
  <li class="nav-item">
    <a class="nav-item nav-link" href="#section-special">Special 
Thanks</a>
  </li>
  <hr>
  <li class="nav-item">
      <a class="nav-item nav-link" href="logout_dummy.php">Logout</a>
  </li>
   </ul>
  </div>

 </div>

<section id="section-banner" class="parallax">
    <h1>Test</h1>
</section>

---

您需要使用

fixedtop

类，并通过jquery动态添加它。差不多吧

$（文档）.ready（函数（）{
var nav=$（“.navbar”）；
$（窗口）。滚动（函数（）{
//从顶部开始50px后添加类
如果（$（窗口）.scrollTop（）>=50）{
资产净值增加等级（“固定顶部”）；
}否则{
导航移除类（“固定顶部”）；
}
});
});
html，
身体{
身高：175%！重要；
}
.视差{
背景图像：url（“https://source.unsplash.com/random/1280x1080");
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}
.视差h1{
文本对齐：居中；
字号：4em；
填充：150；
颜色：白色；
背景：rgba（29,25,29,0.37）；
字体系列：“投石机MS”
}
.标题绝对值{
位置：绝对位置；
左：0；
排名：0；
右：0；
宽度：100%；
z指数：1030；
}
.bg转换{
过渡：背景。3s；
}
.fixed-top.bg-fixed{
背景：rgba（26,26,26,0.9）！重要；
}

你的旗帜













试验

html {
 scroll-behavior: smooth;
}

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

.container {
  width: 100%;
  height: 100%;
}
/*
#section-carousel{
}

.carousel{
 z-index: -99;
}

.carousel-indicators li{
 background-color: black;
}

.carousel-indicators .active{
 background-color: red;
}
*/
img.rounded-circle{
  height: auto;
  width: auto;
}

.license{
  text-aling: center;
}

body {
 height: 90%; 
}

.navbar-nav > .nav-item > a {
  position: relative;
}

header, p {
  text-align: center; 
}


html,
body {
  height: 175% !important;
}

header {
  height: 4em;
 background: #845;
}

.parallax {
  background-image: url("../../images/web_ready/welcome_banner.png");
  background-repeat: no-repeat;
  background-size: cover;

}

.parallax h1 {
  text-align: center;
  font-size: 4em;
  padding: 15rem 0;
  color: white;
  background: rgba(29, 25, 29, 0.37);
  font-family: "Trebuchet MS"
}