html - 通过主要部分后粘性导航栏消失

Question

我似乎无法让我的粘性导航栏一直粘到页面底部，它在我通过 .main div 后消失。

我尝试过不同的 z-indexes

https://jsfiddle.net/pcLohe1v/1/ <-- 更好的例子

/* navbar */

nav {
  background-color: #fff;
  z-index: 1 !important;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  box-shadow: 0px 1px 10px #999;
  transition: top .4s;
  width: 100%;
}

nav ul.navbar-nav li {
  margin-right: 30px;
}

nav li a {
  / color: #000;
  border-bottom: 2px solid #000;
  */
  /* wave effect */
  background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  color: #000;
  text-decoration: none;
  */
}

nav li a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23404d91' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
  text-decoration: none;
  color: #404d91;
  border-bottom-color: #fff;
}

nav button {
  border: 2px solid #000 !important;
}

nav button:focus {
  outline: none;
}

nav img {
  height: 80px;
  width: 100px;
}


/* collapse button svg change coor */

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 102, 203);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


/* main */

.main {
  background: url(../img/good1-min.JPG) no-repeat 50% 50%;
  display: table;
  height: calc(100% - 104px);
  height: -o-calc(100% - 104px);
  /* opera */
  height: -webkit-calc(100% - 104px);
  /* google, safari */
  height: -moz-calc(100% - 104px);
  /* firefox */
  width: 100%;
  background-size: cover;
  padding-top: 10px;
}

.main .container img {
  display: block;
  margin: auto;
  height: 400px;
  width: 500px;
  background-color: rgba(255, 255, 255, 0);
}

/* showcase1 & showcase2 */
.showcase1,
.showcase2 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.showcase1 p,
.showcase2 p {
  font-size: 22px;
  color: #32383e;
}

.showcase1 h1,
.showcase2 h1 {
  font-size: 64px;
}

<!-- Navbar -->
<nav class="navbar navbar-expand-md sticky-top" id="scroll" role="navigation">
  <div class="container">
    <!-- Logo -->
    <a class="navbar-brand" href="#">
      <img src="img/logo.svg" alt="logo">
    </a>
    <!-- Collapse Button -->
    <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#nav">
					<span class="navbar-toggler-icon"></span>
				</button>
    <!-- Navbar dropdown -->
    <div class="collapse navbar-collapse justify-content-end" id="nav">
      <ul class="navbar-nav">
        <!-- Navbar links -->
        <li class="nav-item">
          <a class="nav-link linkB" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link linkB" href="#Kontakt">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link linkB" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- main -->
<div class="main">
  <div class="container">
    <img src="img/_logo_a4.svg" alt="logo">
  </div>
</div>
<!-- showcase1 -->
<div class="showcase1">
  <div class="container">
    <div class="row">
      <div class="col-md-6 animated fadeInLeft">
        <img class="img-responsive" src="img/s1.jpg" style="width: 100%;">
      </div>
      <div class="col-md-6">
        <h1>Lorem.</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p class="bold">lorem ipsum.</p>
      </div>
    </div>
  </div>
</div>

我希望导航栏始终保持粘性，但由于某种原因它会隐藏起来。我不知道该怎么办，也不知道为什么会这样。

Answer 1

问题是:

html, body {
    /* set the body's height to the height of the viewport */
    height: 100%;
}

试试min-height: 100%;。

例如，如果您将 body/html 设置为 overflow: hidden;，则不会有任何滚动条。这是因为您当前在 fiddle 中看到的超出视口(viewport)高度的所有内容都是溢出内容。

在视口(viewport)的 100% 处，您的 sticky 导航已到达其容器的末端并与其一起滚动(正如它应该的那样)!

Here是你的 fiddle 的分支，修改了这个 CSS:

html, body {
    /* height: 100%; */
    min-height: 100%;
    width: 100%;
}