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

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

感谢您提供的任何帮助,您可以提供给我!

Answer 1

你的网站现在看起来很好,但是我被带到这里寻找同样问题的解决方案,所以我想我会在这里添加我的经验.

我遇到的问题是,词缀代码根据页面上的垂直位置将类(例如affix或affix-bottom)应用于附加元素.我称之为"区域".

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

对我来说,关键是确保设置data-offset-top/ data-offset-bottomvalues和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类时,跳转会将元素进一步推入它所进入的区域,这会导致边界处的单个"轻弹",但不会重复闪烁.

NB我认为当你的菜单变得固定时,非常轻微的跳跃可以通过这种方式平滑,通过在贴上时对元素的垂直位置进行非常轻微的调整,和/或设置data-offset-top为适当的值.

干杯,

狮子座

Answer 2

这个Bootstrap 3固定顶部导航栏的答案......

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

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