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

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 垂直移动附加元素，它可能会立即在不同区域结束，因此该类被删除，所以它向后移动，所以类被应用等...因此位置随着每个 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 到一些适当的值。

干杯，

狮子座