javascript - 如何让导航栏保持固定

Question

我只是想让我的导航栏在屏幕顶部有一个固定位置，所以当用户向下滚动时它应该留在顶部，但由于某种原因它没有这样做。

 $(document).ready(function(){
   $(window).bind('scroll', function() {
   var navHeight = $( window ).height() - 286;
     if ($(window).scrollTop() > navHeight) {
       $('nav').addClass('fixed');
     }
     else {
       $('nav').removeClass('fixed');
     }
  });
});

.section {
    background-color: Red;
    padding: 33px 0;
    height: 5000px;
}

.fixed {
    position: fixed;
    left: 20;
    top: 0;
    width: 100%;
    list-style: none;
    z-index: 1;
}
#navs li {
    margin: 0 0 10px 0;
}
#navs li a {
    font-size: 0.9em;
    font-weight: 600;
    color: #999999;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#navs li:hover {
    color: #FFFFFF;
    font-size: 18px;
}
#navs li a.active {
    color: #FFFFFF;
    font-size: 18px;
}
/* For Index 2 */

.navbar {
    min-height: 70px;

}
.navbar-nav {
    float: none;
    margin: 0;
    text-align: center;

}
.navbar-nav > li {
    float: none;
    display: inline-block;
}
.navbar-nav > li > a {
    line-height: 38px;
}
.navbar-nav > li > a.active {
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333333;
    background-color: #E7E7E7;
}
.sticky-wrapper.is-sticky .main-nav {
    width: 100%;
    z-index: 10;
}
.navbar-toggle {
    background-color: #000000;
    background-image: none;
    border: 1px solid #000000 !important;
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 18px;
    padding: 9px 10px;
    position: relative;

}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #2DCC70;
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #000000;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<nav class="navbar navbar-default" role="navigation">
   <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" style="height: 0px;">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#home" class="colapse-menu1">Home</a></li>
            <li class=""><a href="#about" class="colapse-menu1">About Me</a></li>
            <li class=""><a href="#resume" class="colapse-menu1">My Skills</a></li>
            <li class=""><a href="#skills" class="colapse-menu1">Portfoilo</a></li>
            <li class=""><a href="#service" class="colapse-menu1">Contact Me</a></li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container-fluid -->
</nav>
</div>
<div class="section">
</div>

此外，当我刷新它时，当我在页面的一半位置时，该栏会回到顶部，而实际上它应该留在那儿

我一直在使用 this示例并尝试实现它；你可以看到你是否向下滚动到一半并刷新栏停留，但我的没有

Answer 1

I am just trying to get my nav bar to have a fixed position at the top of the screen, so when the user scrolls down it should stay at the top

标记

<nav class='primary-navigation'>
  nav stuff...
</nav>

样式

.primary-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

jsFiddle:https://jsfiddle.net/sheriffderek/3ahupnrk/

I been using this example and trying to implement it; you can see if you scroll down to half way and refresh the bar stays, but mine does not

如果您试图让您的导航只在特定条件下停留 - 就像这个例子，这里是一个广泛评论的例子:https://jsfiddle.net/sheriffderek/zdtLawL4/ - 这是另一个略有不同的示例:http://codepen.io/sheriffderek/pen/zLEkr

希望对你有帮助。