html - 如何制作粘性导航栏？

Question

<分区>

Answer 1

创建一个类 sticky 并给它一个 position:fixed。在滚动时检查窗口和导航栏的位置，然后将该类分配给您的导航以将其粘贴在屏幕顶部。请参见下面的示例:

JSFiddle

var topNav = document.getElementById("topNav"),
  stop = topNav.offsetTop,
  docBody = document.documentElement || document.body.parentNode || document.body,
  hasOffset = window.pageYOffset !== undefined,
  scrollTop;

window.onscroll = function(e) {
  scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
  if (scrollTop >= stop) {
    topNav.className = 'sticky';
  } else {
    topNav.className = '';
  }
}

  header {
    background-image: url("pic15.jpg");
    color: #5A4A4A;
    text-align: center;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  li {
    float: left;
    border-right: 1px solid #bbb;
  }
  li.logo {
    border-right: none;
    font-family: Impact, Charcoal, sans-serif;
    color: white;
    font-size: 40px;
    margin-top: 15px;
    padding-left: 30px;
  }
  li:last-child {
    border-right: none;
  }
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 25px 30px;
    text-decoration: none;
    font-size: 20px;
  }
  li a:hover:not(.active) {
    background-color: #111;
  }
  .active {
    background-color: #4CAF50;
  }
  #section {
    width: 350px;
    float: center;
    padding: 10px;
  }
  #footer {
    background-image: url("pic17.jpg");
    color: white;
    clear: both;
    text-align: center;
    padding: 100px;
  }
  #header {
    font-family: "Comic Sans MS", cursive, sans-serif;
  }
  .sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

<header>
  <h1>New Technology Planet</h1>
  <p>
    <h3>The WebSite Is Still Under Construction By Laith SJ</h3>
  </p>
  <p>Teamspeak3 & WebSites Hosting</p>
  <p>Our goal is to give you the best what we can do!</p>
</header>


<!-- Navagator start -->

<nav role='navigation' id="topNav" class="">
  <ul>
    <li class="logo">NewTecPlanet</li>
    <ul style="float:right;list-style-type:none;">
      <li><a class="active" href="#home">Home</a>
      </li>
      <li><a href="#news">News|Updates</a>
      </li>
      <li><a href="#contact">Products</a>
      </li>
      <li><a href="#login">SignUp | Login</a>
      </li>
      <li><a href="#about">About US</a>
      </li>
      <li><a href="#about">Contact Us</a>
      </li>

    </ul>
  </ul>
</nav>
<!-- navagattor end code -->

<!-- -->




<div id="section">
  <h2>test</h2>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>

</div>


<!-- last part of the page -->

<div id="footer">
  New Technology Planet
</div>