Question

我将“ html”和“ body”中的高度设置为100％，因为我希望第一部分填充整个视口，但是当我执行此操作时，导航栏将不再发粘。我尝试将高度更改为“最小高度”，但是当我将其更改为最小高度时，第一部分将停止填充整个视口。有没有其他方法可以使一个部分或div填充整个视口，或者有其他方法可以使导航栏保持粘性？

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background-color: #313131;
  display: block;
  font-family: 'Montserrat', sans-serif;
  height: 100%;
  margin: 0;
  position: relative;
  text-align: center;
}

#navbar {
  padding: 0px;
  position: sticky;
  top: 4rem;
}

.nav-vertical {
  position: absolute;
  right: 5%;
  text-align: center;
  top: 0px;
  width: 7rem;
}

.nav-link {
  color: #313131;
  font-size: 1rem;
  position: relative;
  text-align: center;
  padding: 1rem 0px;
}

<body data-spy="scroll" data-target="#navbar">

  <!-- MAIN -->
  <section id="main" class="jumbotron-fluid background-black">
    <div class="container">
      <h1>My Name</h1>
    </div>
    <a class="scroll-down" href="#profile">
      <span><i class="fas fa-chevron-down chevron-down"></i></span>
    </a>
  </section>

  <!-- NAVBAR -->
  <nav class="navbar navbar-light" id="navbar">
    <ul class="nav flex-column ml-auto nav-vertical">
      <li class="nav-item nav-active">
        <a class="nav-link active" href="#profile">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#experience">Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#skills">Skills</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </nav>

我希望：

使第一部分填充整个视口。
使导航栏保持粘性，直到页面结束。

非常感谢您。

如何在高度为100％的html和正文中制作粘性导航栏？

0 个答案: