javascript - 在导航栏上实现 Bootstrap 的 affix-top 功能的最佳方法

Question

我一直在尝试让 affix-top 函数在我使用 Bootstrap 创建的网站上正常工作，但无论我将偏移设置为什么，它总是过早地跳到页面顶部。应该注意的是，当我在本地 View 或 Firefox 中查看我的页面时，一切都正常运行，没有剧烈跳转，但是当我实际将其上传到服务器并在除 Firefox 之外的任何其他设备中查看时，这就是事情变得不稳定。

这是我的导航栏的 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也是我的网站，因此您可以看到导航栏是如何跳来跳去的。

感谢您的帮助。我似乎无法解决这个问题!

Answer 1

这似乎不是最好的解决方案，但它(目前)有效。我所做的只是稍微更改我的 JS 代码:

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