如何使用引導程序制作粘性導航欄？

Question

你好，我正在做一個網站，我希望當我進入導航欄時，它仍然在頁面的頂部。 我用 jquery 和 vanilla javascript 嘗試了我的力量，但不幸的是我什么也做不了。 （抱歉英語不好）

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="public/css/main.css">
  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <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>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-center">
          <li class="active"><a href="#home">STRONA GŁÓWNA</a></li>
          <li><a href="#shop">SKLEP</a></li>
          <li><a href="#contact">KONTAKT</a></li>
          <li><a href="#portfolio">PORTFOLIO</a></li>
        </ul>
      </div>
    </div>
  </nav>

CSS

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 15px;
  font-family: 'Poppins';
}
navbar-toggle {
  margin-top: 23px;
  padding: 9px 10px !important;
}
@media (min-width: 768px) {
  .navbar-nav>li>a {
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
    list-style: none;
  }
}
@media screen and (max-width: 767px) {
  .navbar-nav.navbar-center {
    position: static;
    color: #fff;
    transform: none;
    font-size: 1em;
  }
}

在此先感謝您的幫助。

Answer 1

將“ sticky-top ”類添加到您的導航類：

<nav class="navbar sticky-top navbar-inverse">

Answer 2

將fixed-top添加到您的導航類:)