12

我最近将导航栏用作粘性导航栏，当我向下滚动到某个点后，它会粘附在页面顶部，但是，当我到达页面底部时，整个导航栏会闪烁，有时甚至会消失. 把它想象成一台会闪烁的旧电视，你最终会敲击侧面以停止闪烁。我将如何点击导航栏以阻止它闪烁。 这是我的网站，因此您可以见证闪烁的所有荣耀。

这是我的导航 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。你可能会说，只要把它改回来，但使用旧的偏移量，我的粘性导航会过早地跳到顶部。

感谢您为我提供的任何帮助！

4

4 回答 4

11

你的网站现在对我来说看起来不错，但我被带到这里是为了寻找解决同样问题的方法，所以我想我会在这里添加我的经验。

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

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

对我来说，关键是确保data-offset-top/data-offset-bottom值和 CSS 类被设置，以便在词缀切换时元素不再垂直移动。IE 类似：

<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一些适当的值。

干杯，

狮子座

于 2013-05-14T12:28:36.297 回答
8

来自此Bootstrap 3 Fixed Top Navbar 的答案...

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

.navbar
{
   -webkit-backface-visibility: hidden;
}
于 2014-06-12T19:36:42.170 回答
2

我的问题是我的页面内容比我的菜单小，所以当菜单更改为固定位置时，它导致页面变窄。我用这个（咖啡脚本）设置内容最小高度：

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

一切都像一个魅力。

于 2013-08-19T14:28:02.730 回答
1

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

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }
于 2016-12-07T10:26:10.443 回答