twitter-bootstrap 滚动 div 后，如何将引导程序导航栏固定到顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15838776/
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 can I fix the bootstrap navbar to the top after a div was scrolled?
提问by abisson
I am trying to get my navbar with bootstrap to appear after a certain div, called "A". Div "a" is at the top of by page, and has a height of around 400px. Once the user scrolls past the div "a" and the scrollbar, I want the scroll bar to stick to the top. Similar to something like this: https://www.facebook.com/homebut I don't have a video at the top, it is an image.
我试图让我的带有引导程序的导航栏出现在某个名为“A”的 div 之后。Div "a" 位于页面顶部，高度约为 400px。一旦用户滚动通过 div "a" 和滚动条，我希望滚动条粘在顶部。类似于这样的东西：https: //www.facebook.com/home但我在顶部没有视频，它是一个图像。
Can we do that we bootstrap itself?
我们可以自举吗？
Thanks!
谢谢！
采纳答案by Drew Dahlman
I wrote a jQuery plugin for doing this - http://drewdahlman.github.com/Pinned/
我为此编写了一个 jQuery 插件 - http://drewdahlman.github.com/Pinned/
Super simple - just make your header position absolute and position it - then set up the jQuery plugin -
超级简单 - 只需让你的标题位置绝对和定位 - 然后设置 jQuery 插件 -
$("#element").pinned({
bounds: 100, // when to become sticky 100px
scrolling: 0, // position during scroll 0px
});
That should do it!
应该这样做！
Cheers!
干杯!
回答by Zim
If you'd like to achieve this using Twitter's Bootstrap check out the 'Affix' js. You define the "fixed" point using the "data-offset-top" and then the navbar will become fixed to the top when user scrolls down.
如果您想使用 Twitter 的 Bootstrap 实现这一点，请查看“Affix”js。您使用“data-offset-top”定义“固定”点，然后当用户向下滚动时，导航栏将固定在顶部。
CSS:
CSS：
#con .well {
height:390px;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
HTML:
HTML：
<div class="container" data-spy="affix" data-offset-top="400" id="nav">
<div id="nav" class="navbar">
<div class="navbar-inner"> ...
Javascript:
Javascript：
$('#nav').affix();
Here is the working fiddle: http://jsfiddle.net/skelly/df8tb/
这是工作小提琴：http: //jsfiddle.net/skelly/df8tb/
Here's a working example (updated for Bootstrap 3): http://bootply.com/90936
这是一个工作示例（针对 Bootstrap 3 更新）：http: //bootply.com/90936
回答by Felix Eve
To get the effect show on facebook.com/home your navbar position should be set to static (or relative / absolute) until the user scrolls past 400px and then you need to set it's position to fixed so that is stays at the top of the screen. This can be done with a little javascript.
要在 facebook.com/home 上显示效果，您的导航栏位置应设置为静态（或相对/绝对），直到用户滚动超过 400 像素，然后您需要将其位置设置为固定，以便保持在顶部屏幕。这可以通过一些 javascript 来完成。
回答by Kiry Meas
please just follow this. you will not see the snap thing when the menu bar reached the top position.
请只关注这个。当菜单栏到达顶部位置时，您将看不到捕捉的东西。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
.affix {
top:0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Scrollspy & Affix Example</h1>
<h3>Fixed navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
reference: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h
参考：https: //www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h
