twitter-bootstrap 让 Affix 为导航和导航栏工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18450150/
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
Getting Affix to work for nav and navbar
提问by Ward9250
I have some html for a layout for a page for a site for software library my research group made. This is done with bootstrap 3. What I would like to achieve is the navbar that occurs just below the jumbotron to become fixed to the top of the page once it get's scrolled up there. I'd also like similar behaviour for the nag element in the left column of the page - when the page is scrolled and they reach the top - that they then become fixed and stay there. From reading I understand that Affix in twitter bootstrap is the way to go about doing this, but I'm not entirely sure I can figure how to do this right.
我有一些 html 用于我的研究小组制作的软件库站点的页面布局。这是通过引导程序 3 完成的。我想要实现的是出现在超大屏幕下方的导航栏，一旦它向上滚动就会固定在页面顶部。我还希望页面左栏中的 nag 元素具有类似的行为 - 当页面滚动并到达顶部时 - 然后它们变得固定并留在那里。从阅读中我了解到 twitter bootstrap 中的 Affix 是这样做的方法，但我不完全确定我能弄清楚如何正确地做到这一点。
With the HTML below what happens is after scrolling so far the navbar which should span the page becomes squashed - the navbar links move to one row below the navbar brand and the bar nolonger spans the page. Once I figure out how to use affix with the navbar I hope to use it with the nav element. Can anyone explain what I need to do to get the effect? I'm fairly new to web design stuff.
在下面的 HTML 中，滚动到目前为止应该跨越页面的导航栏被压扁 - 导航栏链接移动到导航栏品牌下方的一行，并且该栏不再跨越页面。一旦我弄清楚如何将词缀与导航栏一起使用，我希望将它与导航元素一起使用。谁能解释我需要做什么才能获得效果？我对网页设计的东西相当陌生。
Thanks, Ben.
谢谢，本。
HTML:
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SOFTWARE - GETTING STARTED WITH SOFTWARE</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
</head>
<body>
<style>
.jumbotron {
margin-bottom: 0px;
}
</style>
<!-- Start of main container -->
<div class="container-fluid main">
<div class="row-fluid">
<div class="jumbotron">
<h1> Getting Started </h1>
<p> Installing SOFTWARE on your machine is easy for most systems.
This guide will get you up and running.
</p>
</div>
</div>
<!--Here's thestart of the navabar I'm trying to affix -->
<div class="row-fluid" data-spy="affix" data-offset-top="200">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">SOFTWARE</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About SOFTWARE</a></li>
<li class="active"><a href="#">Getting Started</a></li>
<li><a href="#">Quick Start</a></li>
<li><a href="#">Full Documentation</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">GitHub Repository</a></li>
<li><a href="#">Download TAR</a></li>
<li><a href="#">Download ZIP</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Begin Layout for Getting Started Page -->
<div class="row-fluid">
<div class="col-lg-3">
<ul class="nav nav-pills nav-stacked sidemenu">
<li><a href="#">Introduction</a></li>
<li><a href="#">Installing R</a></li>
<li><a href="#">R Recommendations</a></li>
<li><a href="#">Installing HybRIDS from GitHub</a></li>
<li><a href="#">Installing HybRIDS from Source File</a></li>
<li><a href="#">Installing HybRIDS from Binary File</a></li>
</ul>
</div>
<div class="col-lg-9 whitep">
<h1 class="whitep">Introduction</h1>
<p>
Installation text
Installation text
Installation text
Installation text
Installation text
</p>
<hr>
<h1>Installing R</h1>
<p>
R is simple to install for most operating systems. If you use a Mac or PC or Linux system, the process for installing it is like for installing any other software on that system.
</p>
<p>
TEST text to fill page to test scrolling behaviour...
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
</div>
</div>
</div> <!--End of main Container-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
回答by Zim
As stated in the Bootstrap docs, you have to define the CSS classes for nav and navbar for when the affixkicks in...
正如 Bootstrap 文档中所述，您必须为 nav 和 navbar 定义 CSS 类，以便在affix启动时...
"You must provide the styles for these classes yourself (independent of this plugin). The affix-top class should be in the regular flow of the document."
“你必须自己为这些类提供样式（独立于这个插件）。词缀顶级类应该在文档的常规流中。”
So you'll need to have some CSS for both the top navbar and side nav..
因此，您需要为顶部导航栏和侧边导航栏添加一些 CSS。
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
#sidebar.affix {
position: fixed;
top: 80px;
}
Here is a Bootply demo using affixwith both top and side nav: http://bootply.com/69848
这是一个使用affix顶部和侧面导航的 Bootply 演示：http: //bootply.com/69848
