twitter-bootstrap 到达页面底部时粘性导航栏闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14832621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sticky nav bar is flickering when reaching bottom of page
提问by Brian
I recently go my nav bar to act as a sticky nav bar that adheres to the top of my page after I scroll down to a certain point, however, when I reach the bottom of my page the entire nav bar flickers, and even disappears sometimes. Think of it as an old TV that would flicker and you would end up hitting on the side to stop the flickering. How would I hit my nav bar to stop it from flickering. Hereis my site so you can witness all the glory of the flicker.
我最近将我的导航栏用作粘性导航栏，在我向下滚动到某个点后，它会附着在我的页面顶部，但是，当我到达页面底部时，整个导航栏会闪烁，有时甚至会消失. 把它想象成一台会闪烁的旧电视，你最终会敲击侧面以阻止闪烁。我将如何点击我的导航栏来阻止它闪烁。 这是我的网站，因此您可以见证闪烁的所有荣耀。
Here is my HTML for the nav:
这是我的导航 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-->
And here is my JS:
这是我的 JS：
<script>
$(document).ready(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: 675
});
});
</script>
An important note should be that this only began occurring after I changed the offset in my JS from offset: $('#nav').position()to offset: 675. You might say, well just change it back, but with the old offset, my sticky nav would jump prematurely to the top.
重要提示应该是，这只是开始发生后，我改变了从我的JS偏移offset: $('#nav').position()到offset: 675。你可能会说，好吧，把它改回来，但是使用旧的偏移量，我的粘性导航会过早地跳到顶部。
Thanks for any help of input you can provide me!
感谢您为我提供的任何输入帮助！
回答by Leo
Your site looks fine to me now, but I was brought here looking for a solution to the same problem, so I thought I would add my experience here.
你的网站现在对我来说看起来不错，但我被带到这里寻找同样问题的解决方案，所以我想我会在这里添加我的经验。
The issue I had was that the affix code applies a class (e.g. affixor affix-bottom) to the affixed element based on its vertical position on the page. I'll call these 'zones'.
我遇到的问题是，附加代码根据其在页面上的垂直位置将类（例如affix或affix-bottom）应用于附加元素。我将称这些为“区域”。
If the CSS for the new class is such that it moves the affixed element vertically, it may end up instantly in a differentzone, so the class is removed, so it moves back, so the class is applied etc... The position therefore alternates with every onscrollevent, and flickers.
如果新类的 CSS 使得它垂直移动附加元素，它可能会立即在不同的区域结束，因此该类被删除，因此它向后移动，因此应用该类等等......因此的位置与每个onscroll事件交替，并闪烁。
The key for me was to ensure that the data-offset-top/ data-offset-bottomvalues and CSS classes and were set so that the element no longer moves vertically when the affix toggles. I.E. Something like:
对我来说，关键是确保data-offset-top/data-offset-bottom值和 CSS 类 和 设置为当词缀切换时元素不再垂直移动。IE 类似：
<div class="someClass" data-spy="affix" data-offset-top="20" data-offset-bottom="300">
...
</div>
(The data-offset-bottomis to reattach the element so it doesn't crash into e.g. a tall footer, and won't always be necessary.) And then:
（这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. */
}
Sometimes the jump when the CSS classes are changed pushes the element further intothe zone it is entering, which leads to a single 'flick' at the boundary, but not repeated flickering.
有时，更改 CSS 类时的跳转会将元素进一步推入它正在进入的区域，这会导致边界处的单次“轻弹”，但不会重复闪烁。
N.B. I think the very slight jump when your menu becomes fixed could possibly be smoothed out in this way, by making a very slight adjustment to the vertical position of the element when affixed, and/or by setting data-offset-topto some appropriate value.
注意，我认为当您的菜单固定时，非常轻微的跳跃可能会以这种方式平滑，通过对附加时元素的垂直位置进行非常轻微的调整，和/或通过设置data-offset-top为一些适当的值。
Cheers,
干杯，
Leo
狮子座
回答by ken
Answer from this Bootstrap 3 Fixed Top Navbar...
来自这个Bootstrap 3 Fixed Top Navbar 的答案......
Just add the following to .navbar
只需将以下内容添加到 .navbar
.navbar
{
-webkit-backface-visibility: hidden;
}
回答by Kadu Diógenes
The problem for me was that my page content was smaller than my menu, so when the menu was changed to the fixed position it caused the page to narrow. I set the content min-height with this (coffeescript):
我的问题是我的页面内容比我的菜单小，所以当菜单更改到固定位置时，它会导致页面变窄。我用这个（咖啡脚本）设置了内容最小高度：
$ ->
$('.content').css('min-height', ->
$('.bs-docs-sidebar').height())
And everything worked like a charm.
一切都像魅力一样。
回答by Rajon Tanducar
Just add this to your CSS class.
只需将其添加到您的 CSS 类中即可。
.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }
