Bootstrap navbar-fixed-top实现问题 - 未按预期工作

Question

我在我的网站上使用Bootstrap的navbar-top-fixed实现，但它似乎不起作用。当我向下滚动时，它没有固定在顶部。

这是我的HTML代码：

<nav id="menuBar" class="navbar navbar-default bb-fixed-header lightHeader"  role="navigation">
      <div class="container">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="img/logo-blue.png" alt="logo"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active dropdown singleDrop">
                    <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">home <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li><a href="index.html">Map Version</a></li>
                  <li><a href="index-2.html">Travel Version</a></li>
                  <li><a href="index-3.html">Automobile Version</a></li>
                </ul>
              </li>
              <li class=" dropdown megaDropMenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Listing <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <ul class="row dropdown-menu">
                  <li class="col-sm-4 col-xs-12">
                    <ul class="list-unstyled">
                        <li><h5>listing Grids</h5></li>
                        <li><a href="category-grid.html">Listing Grid Left</a></li>
                        <li><a href="category-grid-right.html">Listing Grid Right</a></li>
                        <li><a href="category-grid-full.html">Listing Grid Fullwidth</a></li>
                        <li><h5>listing lists</h5></li>
                        <li><a href="category-list-left.html">Listing list Left</a></li>
                        <li><a href="category-list-right.html">Listing list Right</a></li>
                        <li><a href="category-list-full.html">Listing list Full</a></li>
                    </ul>
                  </li>
                  <li class="col-sm-4 col-xs-12">
                    <ul class="list-unstyled">
                        <li><h5>listing Sidebar Map</h5></li>
                        <li><a href="listing-sidebar-map-left.html">Listing Sidebar Map left</a></li>
                        <li><a href="listing-sidebar-map-right.html">Listing Sidebar Map right</a></li>
                        <li><a href="listing-sidebar-map-full.html">Listing Sidebar Map Full</a></li>
                        <li><h5>listing Details</h5></li>
                        <li><a href="listing-details-left.html">Listing Details Left</a></li>
                        <li><a href="listing-details-right.html">Listing Details Right</a></li>
                        <li><a href="listing-details-full.html">Listing Details Full</a></li>
                    </ul>
                  </li>
                  <li class="col-sm-4 col-xs-12">
                    <ul class="list-unstyled">
                        <li class="mega-img">
                            <a href=""><img src="img/works/works-big-3.png" alt=""></a>
                        </li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class=" dropdown singleDrop">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <ul class="dropdown-menu dropdown-menu-left">
                  <li><a href="contact-us.html">Contact Us</a></li>
                  <li><a href="terms-of-services.html">Terms and Conditions</a></li>
                  <li><a href="sign-up.html">Create Account</a></li>
                  <li><a href="login.html">Login</a></li>
                  <li><a href="pricing-table.html">Pricing</a></li>
                  <li><a href="payment-process.html">Payment</a></li>
                  <li><a href="how-it-works.html">How It Works</a></li>
                </ul>
              </li>
              <li class=""><a href="blog.html">blog </a></li>
              <li class=" dropdown singleDrop">
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li><a href="dashboard.html">Dashboard</a></li>
                  <li><a href="add-listings.html">Add Listing</a></li>
                  <li><a href="edit-listings.html">Edit Listing</a></li>
                  <li><a href="listings.html">My Listings</a></li>
                  <li><a href="profile.html">My Profile</a></li>
                  <li><a href="oders.html">My Orders</a></li>
                </ul>
              </li>
            </ul>
        </div>
        <button class="btn btn-default navbar-btn" type="button" data-toggle="modal" data-target="#loginModal"> + <span>Add Listing</span> </button>
      </div>
    </nav>
  </div>
</header>

这是CSS：

/*=== 3. HEADER ===*/

/*=== 3.1 NAVBAR ===*/
.bb-fixed-header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 999; }

.navbar-default {
  background-color: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

.navbar-nav {
  height: 300px;
  overflow-x: hidden;
  background-color: #ffffff;
  -webkit-transition: height 0.3s ease;
  -moz-transition: height 0.3s ease;
  -ms-transition: height 0.3s ease;
  -o-transition: height 0.3s ease;
  transition: height 0.3s ease;
  margin-top: 0; }
  @media (min-width: 768px) {
    .navbar-nav {
      height: auto;
      overflow-x: visible;
      overflow-y: visible; } }

.navbar-collapse {
  box-shadow: none;
  position: relative;
  top: -2px; }
  @media (min-width: 768px) {
    .navbar-collapse {
      top: 0; } }

.navbar-header {
  height: 72px; }
  @media (min-width: 768px) {
    .navbar-header {
      height: auto; } }

.navbar-brand {
  height: auto;
  float: left;
  position: absolute;
  z-index: 1000;
  background-color: transparent;
  box-shadow: none;
  width: auto;
  padding: 10px;
  top: 0; }
  .navbar-brand > img {
    width: 100%; }
  @media (min-width: 768px) {
    .navbar-brand {
      height: auto;
      width: 151px;
      padding: 25px 0;
      top: 0; } }
  .navbar-brand:hover {
    background-color: transparent !important; }

@media (min-width: 768px) {
  .navbar-default .navbar-nav {
    background-color: transparent; } }
@media (min-width: 768px) {
  .navbar-default .navbar-nav.navbar-right {
    margin-right: 165px; } }
.navbar-default .navbar-nav > li > a {
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  color: #222222;
  background-color: transparent; }
  .navbar-default .navbar-nav > li > a:hover {
    background-color: transparent;
    color: #2196f3; }
    @media (min-width: 768px) {
      .navbar-default .navbar-nav > li > a:hover {
        color: #2196f3; } }
  @media (min-width: 768px) {
    .navbar-default .navbar-nav > li > a {
      margin: 0;
      padding: 38px 10px;
      font-size: 12px;
      color: #ffffff; } }
  @media (min-width: 992px) {
    .navbar-default .navbar-nav > li > a {
      margin: 0;
      padding: 40px 20px 37px 20px;
      font-size: 14px; } }
  .navbar-default .navbar-nav > li > a i.fa {
    margin-left: 3px;
    font-size: 17px;
    display: none; }
    @media (min-width: 768px) {
      .navbar-default .navbar-nav > li > a i.fa {
        display: inline-block; } }
.navbar-default .navbar-nav > li.active a {
  background-color: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$value)";
  filter: alpha(opacity=1);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  color: #2196f3; }
.navbar-default .navbar-nav > li.active a:hover {
  background-color: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$value)";
  filter: alpha(opacity=1);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  color: #2196f3; }
.navbar-default .navbar-nav > li.open > a {
  color: #2196f3;
  background-color: #2196f3;
  background-color: transparent; }
  .navbar-default .navbar-nav > li.open > a:hover, .navbar-default .navbar-nav > li.open > a:focus {
    background-color: transparent;
    color: #2196f3; }
.navbar-default .navbar-nav > li.dropdown .dropdown-menu {
  border: none;
  box-shadow: none; }
  .navbar-default .navbar-nav > li.dropdown .dropdown-menu a {
    padding: 5px 20px;
    margin-bottom: 0; }
@media (min-width: 768px) {
  .navbar-default .navbar-nav > li.userImage > a {
    margin: 0;
    padding: 22px 10px; } }
@media (min-width: 992px) {
  .navbar-default .navbar-nav > li.userImage > a {
    margin: 0;
    padding: 22px 20px; } }
.navbar-default .navbar-nav > li.userImage > a img {
  margin-top: -4px; }
.navbar-default .navbar-nav > li.userImage > a i.fa {
  line-height: 53px; }
@media (min-width: 320px) {
  .navbar-default .navbar-nav > li {
    overflow: hidden; } }
@media (min-width: 480px) {
  .navbar-default .navbar-nav > li {
    overflow: visible; } }

.navbar-nav li.dropdown.megaDropMenu {
  position: static; }
  .navbar-nav li.dropdown.megaDropMenu .dropdown-menu {
    margin: -1px auto 0 auto;
    right: 15px;
    margin-bottom: 10px; }
    @media (min-width: 768px) {
      .navbar-nav li.dropdown.megaDropMenu .dropdown-menu {
        left: 0;
        padding: 10px 5px 5px;
        width: 720px;
        margin-bottom: 0; } }
    @media (min-width: 992px) {
      .navbar-nav li.dropdown.megaDropMenu .dropdown-menu {
        padding: 15px 15px 5px;
        width: 940px; } }
    @media (min-width: 1200px) {
      .navbar-nav li.dropdown.megaDropMenu .dropdown-menu {
        width: 1140px; } }
    @media (min-width: 768px) {
      .navbar-nav li.dropdown.megaDropMenu .dropdown-menu li:nth-child(2) {
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5; } }
    .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .mega-img {
      padding: 0;
      text-align: center; }
      .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .mega-img a {
        padding: 10px 0 0;
        background-color: transparent; }
    .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .list-unstyled {
      width: 100%;
      float: left; }
      @media (min-width: 768px) {
        .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .list-unstyled {
          padding-bottom: 15px; } }
      .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .list-unstyled li h5 {
        color: #a0a0a0;
        margin-left: 20px;
        margin-top: 20px; }
      .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .list-unstyled li a {
        color: #848484;
        font-size: 14px;
        float: left;
        width: 100%;
        background-color: transparent; }
        @media (min-width: 768px) {
          .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .list-unstyled li a {
            padding: 10px 20px; } }
        .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .list-unstyled li a:hover {
          color: #2196f3; }
      .navbar-nav li.dropdown.megaDropMenu .dropdown-menu .list-unstyled li:nth-child(4) a {
        padding-bottom: 20px; }

.nav-wrapper .navbar-nav li.open.megaDropMenu .dropdown-menu,
.nav-wrapper .navbar-nav li.dropdown.megaDropMenu .dropdown-menu {
  border-radius: 4px; }
  .nav-wrapper .navbar-nav li.open.megaDropMenu .dropdown-menu:after,
  .nav-wrapper .navbar-nav li.dropdown.megaDropMenu .dropdown-menu:after {
    display: none; }
  @media (min-width: 768px) {
    .nav-wrapper .navbar-nav li.open.megaDropMenu .dropdown-menu,
    .nav-wrapper .navbar-nav li.dropdown.megaDropMenu .dropdown-menu {
      width: 100%;
      margin-top: -15px; }
      .nav-wrapper .navbar-nav li.open.megaDropMenu .dropdown-menu:after,
      .nav-wrapper .navbar-nav li.dropdown.megaDropMenu .dropdown-menu:after {
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 7px solid #ffffff;
        content: "";
        display: inline-block;
        left: 56%;
        position: absolute;
        top: -7px;
        margin-left: -50px; } }

.nav-wrapper .navbar-nav li.open .dropdown-menu,
.nav-wrapper .navbar-nav li.dropdown .dropdown-menu {
  border-radius: 4px;
  border: none;
  width: 100%;
  left: 0;
  top: 0;
  right: auto;
  margin-top: -1px;
  padding: 5px 5px 5px 15px; }
  .nav-wrapper .navbar-nav li.open .dropdown-menu:after,
  .nav-wrapper .navbar-nav li.dropdown .dropdown-menu:after {
    display: none; }
  @media (min-width: 768px) {
    .nav-wrapper .navbar-nav li.open .dropdown-menu,
    .nav-wrapper .navbar-nav li.dropdown .dropdown-menu {
      top: 100%;
      min-width: 230px;
      width: auto;
      padding: 15px 0;
      margin-top: -15px; }
      .nav-wrapper .navbar-nav li.open .dropdown-menu:after,
      .nav-wrapper .navbar-nav li.dropdown .dropdown-menu:after {
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 7px solid #ffffff;
        content: "";
        display: inline-block;
        left: 10%;
        position: absolute;
        top: -7px;
        margin-left: 0; } }
  .nav-wrapper .navbar-nav li.open .dropdown-menu ul.dropdown-menu,
  .nav-wrapper .navbar-nav li.dropdown .dropdown-menu ul.dropdown-menu {
    top: 100%;
    left: 0;
    margin-top: 0;
    background-color: #ffffff; }
    @media (min-width: 768px) {
      .nav-wrapper .navbar-nav li.open .dropdown-menu ul.dropdown-menu,
      .nav-wrapper .navbar-nav li.dropdown .dropdown-menu ul.dropdown-menu {
        border: none;
        top: 0 !important;
        left: 100% !important;
        margin-top: -5px;
        margin-left: 4px;
        border-left: none;
        border-top: 3px solid transparent; } }
    .nav-wrapper .navbar-nav li.open .dropdown-menu ul.dropdown-menu:after,
    .nav-wrapper .navbar-nav li.dropdown .dropdown-menu ul.dropdown-menu:after {
      border-left: 13px solid transparent;
      border-right: 13px solid transparent;
      border-bottom: 7px solid transparent;
      content: "";
      display: inline-block;
      left: 10%;
      position: absolute;
      top: -7px;
      margin-left: 0; }
.nav-wrapper .navbar-nav li.open .dropdown-menu.dropdown-menu-right,
.nav-wrapper .navbar-nav li.dropdown .dropdown-menu.dropdown-menu-right {
  left: auto;
  right: 0; }
  .nav-wrapper .navbar-nav li.open .dropdown-menu.dropdown-menu-right:after,
  .nav-wrapper .navbar-nav li.dropdown .dropdown-menu.dropdown-menu-right:after {
    display: none; }
  @media (min-width: 768px) {
    .nav-wrapper .navbar-nav li.open .dropdown-menu.dropdown-menu-right:after,
    .nav-wrapper .navbar-nav li.dropdown .dropdown-menu.dropdown-menu-right:after {
      border-left: 13px solid transparent;
      border-right: 13px solid transparent;
      border-bottom: 7px solid #ffffff;
      content: "";
      display: inline-block;
      left: auto;
      right: 20%;
      position: absolute;
      top: -7px;
      margin-left: 0; } }

.navbar-nav li.dropdown.singleDrop .dropdown-menu li a {
  color: #848484;
  font-size: 14px;
  float: none;
  width: 100%;
  background-color: transparent; }
  @media (min-width: 768px) {
    .navbar-nav li.dropdown.singleDrop .dropdown-menu li a {
      padding: 10px 20px; } }
  .navbar-nav li.dropdown.singleDrop .dropdown-menu li a:hover {
    background-color: #ffffff;
    color: #2196f3;
    padding-left: 25px; }
.navbar-nav li.dropdown.singleDrop .dropdown-menu li .dropdown-menu {
  margin-bottom: 0; }
  @media (min-width: 768px) {
    .navbar-nav li.dropdown.singleDrop .dropdown-menu li .dropdown-menu li a {
      padding: 10px 20px; } }
  .navbar-nav li.dropdown.singleDrop .dropdown-menu li .dropdown-menu li a:hover {
    padding-left: 25px; }
@media (min-width: 768px) {
  .navbar-nav li.dropdown.singleDrop .dropdown-menu li.open .dropdown-menu {
    border-left: none;
    border-top: none; } }

.dropdown-menu {
  border-radius: 0; }

.dropdown-submenu {
  position: relative; }
  .dropdown-submenu a {
    position: relative; }
    .dropdown-submenu a i {
      padding-left: 10px;
      font-size: 9px; }
  .dropdown-submenu > .dropdown-menu {
    top: 0;
    margin-top: 0 !important;
    margin-left: -1px;
    left: 0; }
    @media (min-width: 768px) {
      .dropdown-submenu > .dropdown-menu {
        left: 100%; } }
  .dropdown-submenu.pull-left {
    float: none; }
    .dropdown-submenu.pull-left > .dropdown-menu {
      left: -100%;
      margin-left: 10px; }

.navbar-toggle {
  margin-top: 20px; }

.navbar-toggle {
  background-color: #ffffff; }

@media (min-width: 768px) {
  .navbar-collapse {
    border-color: #ffffff; } }


/*=== 3.4 LIGHT HEADER ===*/
.nav-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  background-color: transparent;
  position: fixed;
  width: 100%;
  z-index: 1000; }
  .nav-wrapper .header-bg {
    position: relative;
    right: 0;
    left: 0;
    height: 70px;
    top: 0;
    z-index: 1030;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    @media (min-width: 768px) {
      .nav-wrapper .header-bg {
        height: 97px; } }
    .nav-wrapper .header-bg .header-left {
      height: 70px; }
      @media (min-width: 768px) {
        .nav-wrapper .header-bg .header-left {
          height: 97px; } }
    .nav-wrapper .header-bg .header-right {
      height: 70px; }
      @media (min-width: 768px) {
        .nav-wrapper .header-bg .header-right {
          height: 97px; } }
  .nav-wrapper .lightHeader {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
    height: 70px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    @media (min-width: 768px) {
      .nav-wrapper .lightHeader {
        height: 97px; } }

.nav-wrapper.bb-fixed-header {
  position: fixed;
  right: 0;
  left: 0;
  top: 0; }
  .nav-wrapper.bb-fixed-header .header-bg {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    top: 0;
    -webkit-box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1); }
    @media (min-width: 768px) {
      .nav-wrapper.bb-fixed-header .header-bg {
        height: 80px; } }
    @media (min-width: 768px) {
      .nav-wrapper.bb-fixed-header .header-bg .header-left {
        height: 80px; } }
    @media (min-width: 768px) {
      .nav-wrapper.bb-fixed-header .header-bg .header-right {
        height: 80px; } }
  .nav-wrapper.bb-fixed-header .lightHeader {
    right: 0;
    left: 0;
    top: 0;
    z-index: 1030;
    height: 97px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    @media (min-width: 768px) {
      .nav-wrapper.bb-fixed-header .lightHeader {
        height: 80px; } }
    .nav-wrapper.bb-fixed-header .lightHeader .navbar-brand {
      height: auto;
      padding: 15px;
      width: 160px; }
      @media (min-width: 768px) {
        .nav-wrapper.bb-fixed-header .lightHeader .navbar-brand {
          height: auto;
          padding: 15px;
          width: 190px; } }
    @media (min-width: 768px) {
      .nav-wrapper.bb-fixed-header .lightHeader .navbar-nav.navbar-right {
        margin-top: 13px; } }
    .nav-wrapper.bb-fixed-header .lightHeader .topList {
      display: none; }
    .nav-wrapper.bb-fixed-header .lightHeader .searchBox {
      display: none; }
  .nav-wrapper.bb-fixed-header .navbar-default .navbar-nav.navbar-right {
    margin-right: 0; }
  @media (min-width: 768px) {
    .nav-wrapper.bb-fixed-header .navbar-nav li.open .dropdown-menu,
    .nav-wrapper.bb-fixed-header .navbar-nav li.dropdown .dropdown-menu {
      border: 1px solid #e0e1e2;
      -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.33);
      -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.33);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.33); } }
  @media (min-width: 768px) {
    .nav-wrapper.bb-fixed-header .navbar-nav li.open .dropdown-menu ul.dropdown-menu,
    .nav-wrapper.bb-fixed-header .navbar-nav li.dropdown .dropdown-menu ul.dropdown-menu {
      margin-left: 1px;
      border-left: 1px solid #e0e1e2;
      border-top: 3px solid transparent; } }

.navbar-default .navbar-toggle {
  background-color: #2196f3;
  border-color: #2196f3;
  margin-top: 17px;
  border-radius: 4px;
  padding: 11px 10px;
  margin-right: 15px; }
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #2196f3;
    border-color: #2196f3; }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff; }
  @media (min-width: 768px) {
    .navbar-default .navbar-toggle {
      margin-right: 0; } }

知道造成这个问题的原因是什么？我不确定为什么会这样。我觉得有些CSS被某些地方覆盖了。

Answer 1

无需为导航栏写css将其固定到顶部....

在.navbar-fixed-top

中使用bootstrap3预定义类nav

Stack Snippet

＆＃13;

＆＃13;

body {
  height: 1000px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav id="menuBar" class="navbar navbar-default navbar-fixed-top lightHeader" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a class="navbar-brand" href="index.html">Brand</a>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active dropdown singleDrop">
          <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">home <i class="fa fa-angle-down" aria-hidden="true"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="index.html">Map Version</a></li>
            <li><a href="index-2.html">Travel Version</a></li>
            <li><a href="index-3.html">Automobile Version</a></li>
          </ul>
        </li>
        <li class=" dropdown megaDropMenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Listing <i class="fa fa-angle-down" aria-hidden="true"></i></a>
          <ul class="row dropdown-menu">
            <li class="col-sm-4 col-xs-12">
              <ul class="list-unstyled">
                <li>
                  <h5>listing Grids</h5>
                </li>
                <li><a href="category-grid.html">Listing Grid Left</a></li>
                <li><a href="category-grid-right.html">Listing Grid Right</a></li>
                <li><a href="category-grid-full.html">Listing Grid Fullwidth</a></li>
                <li>
                  <h5>listing lists</h5>
                </li>
                <li><a href="category-list-left.html">Listing list Left</a></li>
                <li><a href="category-list-right.html">Listing list Right</a></li>
                <li><a href="category-list-full.html">Listing list Full</a></li>
              </ul>
            </li>
            <li class="col-sm-4 col-xs-12">
              <ul class="list-unstyled">
                <li>
                  <h5>listing Sidebar Map</h5>
                </li>
                <li><a href="listing-sidebar-map-left.html">Listing Sidebar Map left</a></li>
                <li><a href="listing-sidebar-map-right.html">Listing Sidebar Map right</a></li>
                <li><a href="listing-sidebar-map-full.html">Listing Sidebar Map Full</a></li>
                <li>
                  <h5>listing Details</h5>
                </li>
                <li><a href="listing-details-left.html">Listing Details Left</a></li>
                <li><a href="listing-details-right.html">Listing Details Right</a></li>
                <li><a href="listing-details-full.html">Listing Details Full</a></li>
              </ul>
            </li>
            <li class="col-sm-4 col-xs-12">
              <ul class="list-unstyled">
                <li class="mega-img">
                  <a href=""><img src="img/works/works-big-3.png" alt=""></a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class=" dropdown singleDrop">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
          <ul class="dropdown-menu dropdown-menu-left">
            <li><a href="contact-us.html">Contact Us</a></li>
            <li><a href="terms-of-services.html">Terms and Conditions</a></li>
            <li><a href="sign-up.html">Create Account</a></li>
            <li><a href="login.html">Login</a></li>
            <li><a href="pricing-table.html">Pricing</a></li>
            <li><a href="payment-process.html">Payment</a></li>
            <li><a href="how-it-works.html">How It Works</a></li>
          </ul>
        </li>
        <li class=""><a href="blog.html">blog </a></li>
        <li class=" dropdown singleDrop">
          <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin <i class="fa fa-angle-down" aria-hidden="true"></i></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="dashboard.html">Dashboard</a></li>
            <li><a href="add-listings.html">Add Listing</a></li>
            <li><a href="edit-listings.html">Edit Listing</a></li>
            <li><a href="listings.html">My Listings</a></li>
            <li><a href="profile.html">My Profile</a></li>
            <li><a href="oders.html">My Orders</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <button class="btn btn-default navbar-btn" type="button" data-toggle="modal" data-target="#loginModal"> + <span>Add Listing</span> </button>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您正在使用 Bootstrap 4 ，则只需在标记内放置一个“固定顶级”类。

示例：的

module.exports.getAll = function () {
    var connection = myDB.get();
    connection.collection('REPORTS').find({}).toArray(function (err, result) {
        if (err) {
            throw err;
        } else {
            //console.log(result);
            return result;            
        }
    });
};

您可以访问https://getbootstrap.com/docs/4.0/components/navbar/#placement了解有关Navbar的更多信息

如果你正在使用 Bootstrap 3 ，那么需要在导航栏中放入“navbar-fixed-top”类。

示例：的

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

您可以访问https://getbootstrap.com/docs/3.3/components/#navbar了解详情。