не могу получить липкий Navbar придерживаться

Question

Я пытаюсь заставить navbar придерживаться прокрутки. Я применил то, что нашел в 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 navbar, например, так:

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

Ваш отредактированный кодекс выглядит следующим образом: https://codepen.io/robot_head/pen/qKQwqe