1

我一直试图让 affix-top 功能在我使用 Bootstrap 创建的网站上正常工作，但无论我将偏移量设置为什么，它总是会过早地跳转到页面顶部。应该注意的是，当我在本地视图或 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;
}

对于它的价值，这是我从一开始就工作的类似帖子，但仍然无法让它为我工作。 这也是我的网站，因此您可以看到导航栏是如何跳来跳去的。

谢谢你的帮助。我似乎无法解决这个问题！

4

1 回答 1

1

这似乎不是最好的解决方案，但它（目前）有效。我所做的只是稍微改变我的 JS 代码：

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: 675
        });
    });
</script>
于 2013-02-12T00:37:51.453 回答