twitter-bootstrap 如何强制 Bootstrap 导航栏固定到顶部 下推（滑动）元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27534545/
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
How to Force Bootstrap Navbar Fix To Top Push Down(slide) Elements Under
提问by Suffii
As you can see at This DemoBootstrap 3 Navbar Fixed to Top is not behaving like regular navbras on sliding down elements which are after the navbar in small screens. Instead it is overlaying the navbar on top of content elements. Now can you please let me know if there is a way to force fix navbar also acts like regular navbars on pushing the content down and up on sliding?
正如您在This DemoBootstrap 3 Navbar Fixed to Top 中所看到的，在小屏幕中导航栏之后的向下滑动元素上的行为不像常规导航栏。相反，它将导航栏覆盖在内容元素之上。现在你能告诉我是否有办法强制修复导航栏也像常规导航栏一样在滑动时上下推动内容吗？
Thanks
谢谢
回答by MattD
Alright, so you can kind of get it to do what you want, but allow me to show you why doing this is honestly a bad idea because in the end it's just pointless.
好的，所以你可以让它做你想做的事，但让我告诉你为什么这样做真的是一个坏主意，因为最终它只是毫无意义。
The following answer will use the snippet bellow for refference. You may need to view it full screen which means you may also need to adjust he width of your browser window to get the collapsed nav to show up.
以下答案将使用下面的代码段作为参考。您可能需要全屏查看它，这意味着您可能还需要调整浏览器窗口的宽度以显示折叠的导航。
$(function() {
$('button.navbar-toggle').click(function() {
var value = $('body').css('padding-top');
if (value === '70px') {
$('body').css('padding-top', '+=235');
} else {
$('body').css('padding-top', '70');
}
});
});body {
padding-top: 70px;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>The bit of jQuery at the top is what you can use to adjust the 'padding-top' value of your body element.
您可以使用顶部的 jQuery 来调整 body 元素的“padding-top”值。
Initially, per the official Bootstrap documentationregarding fixed navbars, you have to add a padding-topof 70px to your page's body tag, so the navbar doesn't overlap the page content. As such, to get the page content to move down when you're at the top of the page you have to adjust this padding to fit based on your nav.
最初，根据有关固定导航栏的官方 Bootstrap 文档，您必须padding-top在页面的正文标签中添加70 像素，以便导航栏不会与页面内容重叠。因此，要使页面内容在您位于页面顶部时向下移动，您必须根据导航调整此填充以适合。
But this is where things start to get a little pointless.
但这就是事情开始变得毫无意义的地方。
When you're at the very top of your page content, it gets pushed down and looks kind of okay, similar to the normal Bootstrap navbar:
当您位于页面内容的最顶部时，它会被向下推，看起来还不错，类似于普通的 Bootstrap 导航栏：
However, scroll down about halfway so your body content is now under your navbar and expand the nav again. You get this slight little jump with the content which really doesn't do anything useful for the user.
但是，向下滚动大约一半，以便您的正文内容现在位于导航栏下方，然后再次展开导航。你会得到这个对用户没有任何用处的内容的轻微跳跃。
The fixed navbar is for when you want your nav to always be visible no matter where you are in scrolling your page, which means on mobile sites it has to hover over the content of your page when expanded. Given this, having the body content of your page pushed down when you expand a fixed Bootstrap navbar in mobile view is really quite pointless.
固定导航栏适用于当您希望导航始终可见时，无论您在何处滚动页面，这意味着在移动网站上，它必须在展开时悬停在页面内容上。鉴于此，当您在移动视图中展开固定的 Bootstrap 导航栏时，将页面的正文内容向下推真的毫无意义。
I've provided an answer in case you or anyone else really needs some kind of solution, maybe due to a manager or client that insists on having this type of functionality, but I simply wanted to point out how pointless it really is, that way you might explain it to them as well, possibly at your own risk. :P
我已经提供了一个答案，以防您或其他任何人真的需要某种解决方案，也许是因为经理或客户坚持拥有这种类型的功能，但我只是想指出它真的没有意义，那样您也可以向他们解释，可能需要您自担风险。:P
回答by ron tornambe
The key to pushing down content on mobile devices was to add the "navbar-static-top" to .navbar:
在移动设备上推送内容的关键是在 .navbar 中添加“navbar-static-top”：
if(screen.width >= 768) {
$('.navbar').addClass('navbar-fixed-top');
$('body').css("padding-top", 128);
} else {
$('.navbar').removeClass('navbar-fixed-top navbar-fixed').addClass("navbar-static-top");
$('body').css({"padding-top": 0, "margin-top": 144});
}
