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

Posted 2023-03-06

【中文标题】到达页面底部时，粘性导航栏闪烁

【英文标题】：Sticky nav bar is flickering when reaching bottom of page

【发布时间】：2013-01-27 18:19:35

【问题描述】：

我最近将导航栏用作粘性导航栏，在我向下滚动到某个点后会粘在页面顶部，但是，当我到达页面底部时，整个导航栏会闪烁，并且有时甚至会消失。把它想象成一台会闪烁的旧电视，你最终会敲击侧面以停止闪烁。我将如何点击导航栏以阻止它闪烁。 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 之后才开始发生的。你可能会说，好吧，把它改回来，但是用旧的偏移量，我的粘性导航会过早地跳到顶部。

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

【问题讨论】：

您使用的是哪个浏览器？刚刚用ff和chrome测试过，但看起来还可以。您的网站在我的 1440x900 分辨率显示器上看起来不太好，然后向下滚动。

你试过使用-webkit-perspective: 1000; -webkit-backface-visibility: hidden;吗？ Source

@Morpheus 有趣，我在 FF、Chrome 和 Safari 中对其进行了测试，并且在所有 3 中都有闪烁效果。你的意思是它在那个分辨率下看起来不太好？我的显示器只能得到大约 1300 像素宽。我正在使用 Bootstrap，因此在宽显示器上查看时它确实会表现得很奇怪。关于如何解决它的任何想法？

@thekalaban 我已经在 body 和 #nav 标签中测试了该代码，但闪烁效果仍然存在。

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

【参考方案1】：

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

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

【参考方案2】：

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

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

.navbar

   -webkit-backface-visibility: hidden;

【讨论】：

非常感谢！显然，Bootstrap 3.x 开箱即用，包含这个 webkit 故障。我很高兴解决方案是一个简单的 css 'hack'。我很惊讶这还没有被修补。

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

接受这个答案，好像它对你有用@Brian

【参考方案3】：

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

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

一切都像魅力一样运作。

【参考方案4】：

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

我遇到的问题是，附加代码根据页面上的垂直位置将一个类（例如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 设置为某个适当的值。

干杯，

狮子座