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

时间：2019-08-15 12:53:05

标签： html css bootstrap-4

我似乎无法使粘性导航栏一直保持粘性直至页面底部，在我通过.main div后消失了。

我尝试了不同的z索引

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>

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

2 个答案:

答案 0 :(得分：0)

完美工作。问题可能出在引导脚本和jquery脚本的位置。

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;
}
        <!DOCTYPE html>
        <html>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  
 
      <head>
        <body>
          <!-- 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>
     
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>  


  </body>

</html>

答案 1 :(得分：0)

问题是：

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

改为尝试min-height: 100%;。

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

您的sticky导航在视口的100％处已到达容器的末端，并随其滚动（应该如此）！

Here是经过修改的CSS的小提琴：

html, body {
    /* height: 100%; */
    min-height: 100%;
    width: 100%;
}
相关问题
最新问题