在導航欄上實現Bootstrap附加頂部功能的最佳方法

我一直在試圖讓我的網站上使用Bootstrap創建的詞綴頂部函數正常工作，但無論我如何設置偏移量，它總是過早地跳轉到頁面的頂部。應該注意的是，當我在本地視圖或Firefox中查看我的頁面時，一切都按照它的樣子進行，沒有劇烈的跳轉，但是當我真正將其上傳到服務器並在除Firefox之外的任何地方查看時，事情變得詭異。在導航欄上實現Bootstrap附加頂部功能的最佳方法

這裏是我的導航欄的HTML：

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

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

對於什麼是值得的，here是一個類似的帖子，我從第一次工作，但仍然無法讓它爲我工作。 Here也是我的網站，因此您可以看到導航欄如何跳轉。

感謝您的任何幫助。我似乎無法解決這個問題！

來源

2013-02-11 Brian

這似乎不是最好的解決方案，但它的工作（現在）。我所做的只是改變了我的JS代碼：

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

來源

2013-02-12 00:37:51 Brian

在導航欄上實現Bootstrap附加頂部功能的最佳方法

回答

相關問題