Question

我一直在尝试使用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;
}

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

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

Answer 1

这似乎不是最好的解决方案，但它有效（现在）。我所做的就是改变我的JS代码：

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

在导航栏上实现Bootstrap的附加功能的最佳方法

1 个答案: