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

Sticky nav bar is flickering when reaching bottom of page

本文关键字：导航 闪烁 底部      更新时间：2023-09-26

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

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

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

你的网站现在对我来说很好，但我来这里是为了寻找同样问题的解决方案，所以我想在这里增加我的经验。

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

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

对我来说，关键是要确保data-offset-top/data-offset-bottom值和CSS类和被设置为当词缀切换时元素不再垂直移动。例如：

<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设置为某个适当的值，可以通过这种方式来消除非常轻微的跳跃。

干杯，

Leo

来自此引导程序的答案3固定顶部导航栏。。。

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

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

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

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

一切都像一种魅力。

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

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }
相关文章：