无法粘住导航栏

Question

我正在尝试使导航栏保持滚动状态，我应用了在w3schools上找到的ive，并查看了此处的一些帖子，但我无法使其正常工作。我的代码笔是： 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无法运行的原因是，当navbar实际上是一个类时，您通过ID获取了navbar。继续使用JS的快速解决方案是添加ID导航栏，如下所示：

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

您编辑过的codepen看起来像这样：https://codepen.io/robot_head/pen/qKQwqe