javascript - 无法粘住导航栏

Question

我试图让导航栏保持在滚动条上 我已经应用了我在 w3schools 上找到的内容，并查看了这里的一些帖子，但我没有让它工作。我的代码笔是: https://codepen.io/robot_head/full/qKQwqe/

我的代码如下

html:

  <header class="header-logo">
      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">client</a>
          </div>
          <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="#info">Info</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="header-img">
        <img src="img/logo.jpg" class="img-responsive" style="width:100%" alt="Image">
      </div>
    </header>

CSS:

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

JS:

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Answer 1

由于您使用的是 Bootstrap 3，因此可以避免将 JS 用于粘性导航栏。特别要注意的是，我将类 navbar-fixed-top 添加到标题中。这是工作代码:

.header-logo {
  height: 400px;
  background-color: #06529d;
  margin-bottom: 30px;
}


/* Remove the navbar's default margin-bottom and rounded borders */

.navbar {
  margin-bottom: 0;
  border-radius: 0;
  background-color: #06529d;
}


/*about us */

#about {
  background-color: #06529d;
  height: 600px;
  color: #fff;
}

#lion-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/*contact us */

#contact {
  background-color: #febb2e;
  height: 500px;
  color: #000;
}

.form-area {
  background-color: #FAFAFA;
  padding: 10px 40px 60px;
  margin: 10px 0px 60px;
  border: 1px solid GREY;
}

.control {
  display: block;
  width: 100%;
  height: 50px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
}

button#submit {
  background-color: #8d1f2d;
  border-color: #8d1f2d;
  width: 100%;
  height: 50px;
  border-radius: 10px;
}


/* Add a gray background color and some padding to the footer */

footer {
  background-color: #06529d;
  height: 300px;
  padding: 25px;
}

.red {
  color: red;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<header class="header-logo">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="#">Site</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#info">Info</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="header-img">
    <img src="img/logo.jpg" class="img-responsive" style="width:100%" alt="Image">
  </div>
</header>
<div>
  <div class="container text-center">
    <img src="img/ceylon-hero.jpg" class="img-responsive" style="width:100%" alt="Image">
  </div>
</div>
<div class="container-fluid bg-3 text-center" id="about">
  <h3>ABOUT US</h3>
  <br>
  <div class="container text-center" id="lion-cage">
    <img src="img/lion.png" class="img-responsive" id="lion-img" alt="Image">
  </div>
  <div class="container about-text">
    <p>Hands long clothes execution dock careen lass overhaul code of conduct jib chandler broadside scuttle grog boom port salmagundi coffer Jack Tar mizzen gibbet come about. Wherry Davy Jones' Locker tack sutler Cat o'nine tails lanyard barkadeer jury
      mast hail-shot spyglass plunder broadside port sloop galleon Pirate Round furl careen bilge rat weigh anchor. Arr keel schooner Jack Tar Blimey cackle fruit spirits trysail sheet loaded to the gunwalls lugger Cat o'nine tails line gibbet Pirate
      Round cable bilge water chantey swing the lead Privateer.</p>
    <br>
    <p>Lugger bilge deadlights ye spirits wench bilged on her anchor bring a spring upon her cable Plate Fleet killick dead men tell no tales me Jack Tar Cat o'nine tails Corsair coxswain nipper fire ship yard ahoy. Log mizzen line ho tack blow the man down
      heave down yard hulk crack Jennys tea cup fluke schooner main sheet sheet fathom dance the hempen jig Blimey hands cable hearties. Blow the man down lanyard Plate Fleet grog blossom Sink me wherry come about ho American Main Arr brigantine overhaul
      gabion ahoy hornswaggle nipperkin log Sea Legs keelhaul Blimey.</p>
    <br>
    <p>Me run a rig Buccaneer swing the lead Sink me hardtack capstan smartly tender Brethren of the Coast scuppers brig jib Barbary Coast belaying pin belay careen coffer matey Spanish Main. Transom dead men tell no tales lookout hempen halter grapple square-rigged
      Spanish Main handsomely fore loot shrouds bring a spring upon her cable red ensign man-of-war avast cable fathom grog keelhaul jack. Cackle fruit jack wherry chandler cutlass Buccaneer grog blossom crack Jennys tea cup warp bilge rat haul wind sheet
      bilge water Jack Ketch matey chase red ensign deadlights execution dock gaff.</p>
  </div>
</div>
<div class="container-fluid bg-3 text-center" id="contact">
  <h3>CONTACT US</h3>
  <br>
  <div class="container">
    <div class="col-sm-8 col-sm-push-2">
      <form role="form">
        <br style="clear:both">
        <div class="col-sm-6">
          <div class="form-group">
            <input type="text" class="control" id="firstname" name="firstname" placeholder="First Name" required>
          </div>
          <div class="form-group">
            <input type="text" class="control" id="email" name="email" placeholder="Email" required>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
            <input type="text" class="control" id="lastName" name="lastName" placeholder="Last Name" required>
          </div>
          <div class="form-group">
            <input type="text" class="control" id="phone" name="phone" placeholder="Phone" required>
          </div>
        </div>
        <div class="col-sm-12">
          <button type="button" id="submit" name="submit" class="btn btn-primary">SEND</button>
      </form>
      </div>
    </div>
  </div>
</div>
<footer class="container-fluid text-center" id="info">
  <p>Footer Text</p>
</footer>

请注意，如果您要使用 Bootstrap 4，则必须添加的类是 sticky-top 或 fixed-top。

您的 JS 不工作的原因是您通过 ID 获取导航栏，而导航栏实际上是一个类。继续使用 JS 的快速修复方法是添加 ID 导航栏，如下所示:

 <nav class="navbar navbar-inverse" id="navbar">

您编辑的代码笔如下所示:https://codepen.io/robot_head/pen/qKQwqe