내비게이션 막대를 고정하는 방법

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

하지 않습니다 사용자가 스크롤은 상단

마크 업 숙박

<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

도움이되기를 바랍니다.