我无法让粘性顶部导航栏与下一个元素重叠 bootstrap 4

Question

编辑：期望效果示例 here

第二次编辑：答案实际上很简单，我之前将页眉和页脚拆分到一个单独的文件中，不小心将导航栏放在了 body 标签之外。一旦我将它移到那里并在 body 标签中设置我的背景，然后使用带属性 rgba(5,5,5,0.5) 的背景颜色选择器作为导航栏，一切都很好。

如您所见，我有一个导航栏和一个横幅。目前我正在为导航栏使用 sticky-top class。导航栏是透明的。

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

我尝试了 position: absolute，它确实降低了导航栏，但随后它被固定并一直向左移动。

我也尝试了线程中的建议，建议向导航栏添加自定义 class 并像这样增加顶部元素：

.sticky-offset {
top: 56px;
}

然而，这只会将它永久地向下推，并且在下一个元素上方仍然有一个白色 space。然后我试图减小车身尺寸，但也没有用。

我也尝试过将 overflow: auto 添加到导航栏 class，但没有任何效果。

这是我的 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>

CSS:

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"
}

Answer 1

您需要使用 fixed-top class 并通过 jquery 动态添加。诸如此类。

$( document ).ready( function () {

 var nav = $(".navbar");
 $(window).scroll(function() {
  // Add class after 50px from the top
  if ($(window).scrollTop() >= 50) {
   nav.addClass("fixed-top");
  } else {
   nav.removeClass("fixed-top");
  }
 });
  
});

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

.parallax {
 background-image: url("https://source.unsplash.com/random/1280x1080");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center; 

}

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

.header-absolute {
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 width: 100%;
 z-index: 1030;
}

.bg-transition {
 transition: background .3s;
}

.fixed-top.bg-fixed {
 background: rgba(26, 26, 26, 0.9) !important;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
 integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
 integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
 integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
  
<header class="header header-absolute">
 <!-- Top Bar-->
 <div class="top-banner bg-white text-dark p-2 text-center">Your top banner</div>
 <!-- Navbar-->
 <nav class="navbar navbar-expand-lg navbar-dark bg-transparent bg-transition bg-fixed">
  <!-- <a class="navbar-brand" href="#">Navbar</a> -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
  </button>
  <!-- Navbar Collapse -->
  <div class="collapse navbar-collapse" id="navbarCollapse">
   <ul class="navbar-nav mx-auto">
    <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>
 </nav>
</header>

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

我无法让粘性顶部导航栏与下一个元素重叠 bootstrap 4

I can't get sticky-top navbar to overlap with next element bootstrap 4

sticky

navbar

bootstrap-4