twitter-bootstrap Twitter Bootstrap Affixed Navbar - 下面的 div 跳起来
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15176990/
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
Twitter Bootstrap Affixed Navbar - div below jumps up
提问by deekay
Rather hard to describe the problem. So just look at this jsFiddle:
比较难描述问题。所以看看这个jsFiddle：
When the navbar gets fixed to the top the content jumps below it.
当导航栏固定在顶部时，内容会跳到它下方。
CSS:
CSS：
.affix {
position: fixed;
top: 0px;
}
#above-top {
height: 100px;
background: black;
}
Where is the problem?
哪里有问题？
回答by niaccurshi
The problem here is that there is no way communicated to the rest of the content in the container below the nav that the nav bar has been fixed to the top. You can achieve this using more modern CSS, but be aware that this won't be a fix for older browsers (and indeed there are issues you may find with postion:fixed properties in older browsers too...
这里的问题是没有办法将导航栏固定在顶部的导航栏下方的容器中的其余内容传达出去。您可以使用更现代的 CSS 来实现这一点，但请注意，这不会解决旧浏览器的问题（实际上，您可能会发现 postion:fixed 属性在旧浏览器中也存在一些问题......
.affix + .container {
padding-top:50px
}
This waits until the nav bar is fixed, and then adds padding to the container that is it's sibling, keeping it from "jumping" under the nav.
这会一直等到导航栏被修复，然后向它的兄弟容器添加填充，防止它在导航下“跳跃”。
回答by russellb
You can also use Bootstrap affix events to add and remove padding (or margin) from the relevant element via CSS classes:
您还可以使用 Bootstrap 附加事件通过 CSS 类从相关元素添加和删除填充（或边距）：
// add padding or margin when element is affixed
$("#navbar").on("affix.bs.affix", function() {
return $("#main").addClass("padded");
});
// remove it when unaffixed
$("#navbar").on("affix-top.bs.affix", function() {
return $("#main").removeClass("padded");
});
Here's a JSFiddle: http://jsfiddle.net/mumcmujg/1/
这是一个 JSFiddle：http: //jsfiddle.net/mumcmujg/1/
回答by Henrik N
My solution, inspired by @niaccurshi's:
我的解决方案受到@niaccurshi 的启发：
Instead of hard-coding a padding-top, create an invisible duplicate element that takes up the same amount of space, but only while the original element is affixed.
与其对 padding-top 进行硬编码，不如创建一个不可见的重复元素，该元素占用相同的空间，但仅限于原始元素被附加时。
JS:
JS：
var $submenu = $(".submenu");
// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $submenu.clone().addClass("affix-placeholder");
$submenu.after($placeholder);
$submenu.affix(…);
CSS:
CSS：
.affix-placeholder {
/* Doesn't take up space in the content flow initially. */
display: none;
}
.affix + .affix-placeholder {
/* Once we affix the submenu, it *does* take up space in the content flow. But keep it invisible. */
display: block;
visibility: hidden;
}
回答by user3108698
An alternative, if you want to avoid duplicate content.
另一种选择，如果您想避免重复的内容。
<script>
jQuery(document).ready(function(){
jQuery("<div class='affix-placeholder'></div>").insertAfter(".submenu:last");
});
</script>
<style>
.affix-placeholder {
display: none;
}
.affix + .affix-placeholder {
display: block;
visibility: hidden;
height: /* same as your affix element */;
width: 100%;
overflow: auto;
}
</style>
回答by Meint-Willem Gaasbeek
Add a header wrapper around the sections above it. And give the wrapper a min-height equal to the height of these elements combined.
在其上方的部分周围添加标题包装器。并给包装器一个等于这些元素组合高度的最小高度。
Example:
例子：
<div class="header-wrapper" >
<div class="topbar" >this bar is 36 pixels high</div>
<div class="menubar">this menubar has a height of 80 pixels</div>
</div>
<div class="" >Your container moving upwards after the affix element becomes fixed</div>
The height of both elements 36 + 80 = 116 . The min height of the header wrapper therefor should be 116 pixels, see:
两个元素的高度 36 + 80 = 116 。因此，标题包装器的最小高度应为 116 像素，请参阅：
.header-wrapper {
min-height: 116px;
}
Very simple and neat solution
非常简单和整洁的解决方案
