탐색 모음에 부트 스트랩의 접미사 기능을 구현하는 가장 좋은 방법

Question

부트 스트랩을 사용하여 만든 내 사이트에서 접미사 가기 기능을 제대로 작동 시키려고했으나 오프셋을 설정 한 것과 관계없이 항상 페이지 상단으로 너무 일찍 이동합니다. 로컬 뷰나 파이어 폭스에서 내 페이지를 볼 때 폭력적인 점프가 없어야 만 모든 것이 작동하지만 실제로 서버에 업로드하고 Firefox 이외의 다른 곳에서 볼 때주의해야합니다. 일들이 어색해집니다.

<script> 
    $(document).ready(function() { 
     $('#nav-wrapper').height($("#nav").height()); 
     $('#nav').affix({ 
      offset: $('#nav').position() 
     }); 
    }); 
</script> 

그리고 내 CSS의 일부 관련 :

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 
#nav { 
    position:relative; 
} 

를 들어

<div id="nav-wrapper"> 
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="875"> 
    <div class="navbar-inner" data-spy="affix-top"> 
    <div class="container"> 

     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <!-- Everything you want hidden at 940px or less, place within here --> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#service-top">Services</a></li> 
      <li><a href="#contact-arrow">Contact</a></li> 
     </ul><!--/.nav--> 
     </div><!--/.nav-collapse collapse pull-right--> 
    </div><!--/.container--> 
    </div><!--/.navbar-inner--> 
</div><!--/#nav /.navbar navbar-inverse--> 

여기

내 JS입니다 : 여기

내 네비게이션 바의 HTML입니다 가치가있는 것, here은 내가 처음에 작업 한 비슷한 게시물이지만 아직도 나를 위해 작동하지는 못합니다. Here도 내 사이트이므로 navbar가 어떻게 뛰어 오르는 지 확인할 수 있습니다.

도움 주셔서 감사합니다. 나는이 문제를 해결할 수없는 것 같습니다!

Answer 1

이것은 최상의 솔루션처럼 보이지 않지만 작동합니다 (현재). 내가 한 모든 일은 JS 코드를 조금 바꿨다.

<script> 
    $(document).ready(function() { 
     $('#nav-wrapper').height($("#nav").height()); 
     $('#nav').affix({ 
      offset: 675 
     }); 
    }); 
</script>