Question

我最近使用导航栏作为粘贴导航栏，在我向下滚动到某个点后粘贴到页面顶部，然而，当我到达页面底部时，整个导航栏闪烁，并且有时甚至消失。把它想象成一个会闪烁的旧电视，你最终会撞到一边停止闪烁。如何点击我的导航栏以阻止它闪烁。 Here是我的网站，因此您可以看到闪烁的所有荣耀。

这是我的导航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之后才开始发生的。你可能会说，只需改回它，但是使用旧的偏移量，我的粘性导航会过早地跳到顶部。

感谢您提供的任何输入帮助！

Answer 1

您的网站现在看起来很好，但我被带到这里寻找同一问题的解决方案，所以我想我会在这里添加我的经验。

我遇到的问题是，词缀代码根据页面上的垂直位置将类（例如affix或affix-bottom）应用于附加元素。我称之为“区域”。

如果新类的CSS是垂直移动附加元素的CSS，它可能会立即在不同的区域中结束，因此该类被移除，因此它会向后移动，所以类被应用等...因此，该位置与每个onscroll事件交替，并且闪烁。

对我而言，关键在于确保设置data-offset-top / data-offset-bottom值和CSS类，以便在词缀切换时元素不再垂直移动。 I.E.类似的东西：

<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类时，跳转会将元素进一步推入进入它所进入的区域，这会导致边界处的单个“轻弹”，但不会重复闪烁。

N.B。我认为，当您的菜单固定时，非常轻微的跳跃可以通过这种方式平滑，通过在粘贴时对元素的垂直位置进行非常轻微的调整，和/或将data-offset-top设置为某个适当的值

干杯，

利奥

Answer 2

回答Bootstrap 3 Fixed Top Navbar...

只需将以下内容添加到.navbar

即可

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

Answer 3

问题在于我的页面内容比我的菜单小，所以当菜单更改为固定位置时，会导致页面缩小。我用这个（coffeescript）设置了内容min-height：

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

一切都像魅力一样。

Answer 4

只需将其添加到CSS类中即可。

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

到达页面底部时，粘性导航栏会闪烁

4 个答案: