Question

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

当我刷新它时，当我在页面的一半时，酒吧会回到顶部，真的应该留在那里

我一直在使用this示例并尝试实现它;你可以看到你是否向下滚动到一半并刷新了酒吧，但是我没有

Answer 1

我只是想让我的导航栏在顶部有一个固定的位置屏幕，所以当用户向下滚动时，它应该保持在顶部

标记

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

样式

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

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

我一直在使用这个例子并尝试实现它;你可以看看是否你向下滚动到一半并刷新酒吧，但我的确如此不

如果您尝试仅在某些条件下使用导航 - 例如此示例，则这是一个广泛评论的示例：https://jsfiddle.net/sheriffderek/zdtLawL4/ - 这是另一个稍微不同的示例：http://codepen.io/sheriffderek/pen/zLEkr < / p>

我希望它有所帮助。

如何让导航栏保持固定

1 个答案: