当滚动页面到底部时，固定导航栏会闪烁。

Question

我最近将我的导航栏设置为粘性导航，当我向下滚动到一定位置时它会固定在页面顶部，然而，当我滚到页面底部时，整个导航栏会闪烁甚至有时消失。可以想象成一个旧电视机会出现闪烁问题，你需要敲打一下侧面才能停止闪烁。我该如何“敲打”我的导航栏来防止闪烁？这里是我的网站，您可以亲自体验这种闪烁的荣耀。

这是我的导航栏的HTML代码：

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
  <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-->
</div><!--/#nav-wrapper-->

这是我的JS代码：

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

需要注意的是，这种情况只发生在我把JS中的偏移量从offset: $('#nav').position()更改为offset: 675后。也许你会说，那就改回去呗，但使用旧的偏移量时，我的固定导航会过早地跳到顶部。

谢谢您能提供的任何帮助或建议！

- Brian

---

你在用什么浏览器？我刚刚测试了Firefox和Chrome，看起来没问题。但是在我的1440x900分辨率显示器上向下滚动后，你的网站看起来不太好。 - Morpheus

你有尝试使用-webkit-perspective: 1000; -webkit-backface-visibility: hidden;吗？来源 - user1685185

@Morpheus 很有趣，我在FF、Chrome和Safari中进行了测试，并在所有三个浏览器中都出现了闪烁效果。你说的那个分辨率看起来不好是什么意思？我的显示器只能达到大约1300像素宽。我正在使用Bootstrap，所以在宽屏幕上查看时会出现一些奇怪的问题。有什么想法可以解决吗？ - Brian

@Brian 当我点击联系时，它会向下滚动，但我可以看到大约100像素的服务内容。宽度看起来还不错。 - Morpheus

你好。如果你愿意使用另一个插件，请看这个：sticky-nav我对 Twitter Bootstrap 的 Affix 组件感到沮丧，因为它在我的电脑上一直闪烁。这里有一个提到的插件示例：example - Seed

Answer 1

我认为您的网站现在看起来很好，但我是因为寻找同样问题的解决方案而来到这里的，所以我想在这里分享我的经验。

我的问题是附加代码根据元素在页面上的垂直位置应用一个类（例如affix或affix-bottom）。我称之为“区域”。

如果新类的CSS使得固定元素在垂直方向上移动，它可能会瞬间进入不同的区域，因此类被删除，然后它又回到原来的位置，类被应用等等...... 位置因此会随着每个onscroll事件交替变化，产生闪烁效果。

对于我来说，关键是确保设置data-offset-top/data-offset-bottom值和CSS类，使得元素在附加时不再在垂直方向上移动。也就是像这样：

<div class="someClass" data-spy="affix" data-offset-top="20" data-offset-bottom="300">
  ...
</div>

(data-offset-bottom 属性用于重新贴合元素，以防止它与页面中高的页脚等产生冲突，并且不一定总是必需的。) 然后：

.someClass.affix {
  /* position: fixed; already applied in .affix */
  top: 10px;
  /* might also need e.g. width: 300px; as position: fixed; removes the element from its parent. */
}
.someClass.affix-bottom {
  position: absolute; /* Start scrolling again. */
  top: auto; /* Override the top position above. */
  bottom: 20px; /* It should stop near the bottom of its parent. */
}

有时候，当CSS类被改变时，元素会向它所进入的区域内进一步移动，这会在边界处产生一次单独的'闪烁'，但不会重复闪烁。

注：我认为当菜单变为固定状态时非常轻微的跳跃可能可以通过这种方式平滑处理，即在固定时对元素的垂直位置进行微小调整，和/或者将data-offset-top设置为某个适当的值。

谢谢，

Leo

- Leo

Answer 2

以下是对Bootstrap 3 Fixed Top Navbar...问题的解答：

只需将以下内容添加到 .navbar 中即可:

.navbar
{
   -webkit-backface-visibility: hidden;
}

- ken

---

非常感谢！显然，Bootstrap 3.x默认存在这个webkit故障。我很高兴解决方案是一个简单的CSS“hack”。我很惊讶这个问题还没有被修复。 - Jim22150

是的，我正在等待像良好的颜色、垂直空间等功能。仍然需要一些技巧使其从好变得更好 :) - ken

接受这个答案，如果对您有用 @Brian - Steffi Keran Rani J

Answer 3

对我来说问题在于我的页面内容比菜单栏要小，所以当菜单栏被固定在一个位置时，会导致页面变窄。我使用以下代码（coffeescript）设置了内容的最小高度：

$ ->
  $('.content').css('min-height', ->
    $('.bs-docs-sidebar').height())

一切都像魔法一样顺利。

- Kadu Diógenes

Answer 4

只需将此添加到您的CSS类中。

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }

- Rajon Tanducar