我最近去了我的导航栏,作为一个粘性导航栏,在我滚动到某一点之后,坚持到页面的顶部,但是当我到达我的页面的底部,整个导航栏闪烁,甚至有时消失.把它看作是一个老电视,会闪烁,你最终会碰到一边停止闪烁.我怎么打我的导航栏阻止它闪烁.
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之后才开始发生：你可能会说,只要将其改回,旧的偏移,我的粘性导航将过早跳到顶部.
感谢任何帮助的输入,你可以提供给我！
解决方法
现在,您的网站对我来说很好,但是我被带到这里寻找同样的问题的解决方案,所以我以为我会在这里添加经验.
我遇到的问题是,固定代码根据页面上的垂直位置将一个类(例如贴纸或贴纸底部)应用于固定元素.我会称这些’区’.
如果新类的CSS使它垂直移动固定元素,它可能会立即在不同的区域中结束,因此该类被移除,因此它将返回,因此该类被应用等…因此位置与每一个滚动事件交替,并闪烁.
我的关键是确保数据偏移顶部/数据偏移底部值和CSS类别被设置,使得元素不再垂直移动时,该词缀切换. I.E.就像是：
<div class="someClass" data-spy="affix" data-offset-top="20" data-offset-bottom="300"> ... </div>
(数据偏移底部是重新附加元素,因此它不会崩溃到例如高度的页脚中,并不总是必需的.)然后：
.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类更改时的跳转会将元素进一步推入正在进入的区域,这会导致边界上单个“轻弹”,但不会重复闪烁.
注：我认为当您的菜单变得固定时,非常轻微的跳跃可能会以这种方式平滑,通过在固定时对元素的垂直位置进行非常轻微的调整,和/或通过将数据偏移设置为某个适当值.
干杯,
狮子座
