我正试图让我的引导程序导航栏出现在某个名为“A”的 div 之后。 div“a”位于页面顶部，高度约为 400px。一旦用户滚动通过 div "a" 和滚动条，我希望滚动条贴在顶部。类似于这样的内容：https://www.facebook.com/home 但我在顶部没有视频，它是一张图片。
我们可以做到我们自己引导吗？
谢谢！
【问题讨论】：
标签： javascript jquery css twitter-bootstrap
如果您想使用 Twitter 的 Bootstrap 实现此目的，请查看“Affix”js。您使用“data-offset-top”定义“固定”点，然后当用户向下滚动时，导航栏将固定在顶部。
CSS：
#con .well {
height:390px;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
HTML：
<div class="container" data-spy="affix" data-offset-top="400" id="nav">
<div id="nav" class="navbar">
<div class="navbar-inner"> ...
Javascript：
$('#nav').affix();
这是工作小提琴： http://jsfiddle.net/skelly/df8tb/
这是一个工作示例（针对 Bootstrap 3 更新）：http://bootply.com/90936
【讨论】：
要在 facebook.com/home 上显示效果，您的导航栏位置应设置为静态（或相对/绝对），直到用户滚动超过 400 像素，然后您需要将其位置设置为固定，以便保持在屏幕顶部。这可以用一点 JavaScript 来完成。
【讨论】：
这个答案不再正确。请参阅下面@zim 的回答。
【讨论】：
请按照此操作。当菜单栏到达顶部位置时，您将看不到快照。
<!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>
参考： https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h
【讨论】：