2
我使用Bootstrap Affix插件創建了一個粘性導航欄。 導航欄位於標題下方。當向下滾動頁面時，一旦導航到達頂部，它就會粘在那裏。 它工作正常，迄今爲止很好。Bootstrap affix導航的邊距
但是，有些東西不行，因爲我想要的。在導航欄到達頂部的那一刻，其位置從「靜態」變爲「固定」（出於顯而易見的原因）。結果是導航下的頁面內容不再能夠「看見」導航欄，從一個滾動像素到另一個滾動像素。 （被修復，它被移出流程）。因此，從一個時刻到另一個時刻，頁面內容不會再看到導航的底部邊界，並且將頭部作爲其前面的元素。
後果是頁面內容突然跳過幾行像素（數量等於導航的底部邊距），併產生「跳躍」。
見下面的截圖，一個右側的導航到達頂部之前（還是靜態），和一個右它達到了頂級（固定）
後，所有的一切我覺得這是很可以理解的，CSS可以作爲它的預期至。然而這不是我想要的。我希望頁面內容遵循正常的滾動運動，並且不會跳過一段距離。
我該如何改變這種情況？
標題
<body>
<header class="header container">
<h1>Header</h1>
<h2>Tagline</h2>
<img src="http://lorempixel.com/300/200" />
</header>
<nav id="main-navigation" class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#products">Products</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<section id="about">
<h2>About</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at velit eu leo semper pharetra vitae sed nisl. In elementum neque in urna elementum tristique. Sed malesuada risus justo, ut pellentesque enim vehicula vitae. Quisque a nunc et ligula sagittis ullamcorper. Proin eu faucibus eros, id iaculis felis. Praesent vitae dolor a quam accumsan egestas sit amet et sapien. Praesent tincidunt quam id vestibulum sollicitudin. Ut eget sem a diam tempus tempor. </p>
<p>In elementum neque in urna elementum tristique. Sed malesuada risus justo, ut pellentesque enim vehicula vitae. Quisque a nunc et ligula sagittis ullamcorper. Proin eu faucibus eros, id iaculis felis. Praesent vitae dolor a quam accumsan egestas</p>
<p>Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit. Nam at nibh dignissim libero dictum lacinia lacinia et neque. In viverra lorem id nulla aliquam, vel laoreet est porttitor. Sed congue tincidunt arcu eget cursus.<br />Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia.</p>
</section>
<section id="products">
<h2>Products</h2>
<p> Nunc mattis mauris quis diam dictum, non tristique diam congue. Vestibulum tincidunt augue a dui interdum facilisis. Donec sed neque id nunc ullamcorper porta quis vitae nibh. Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia. Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit. Nam at nibh dignissim libero dictum lacinia lacinia et neque. In viverra lorem id nulla aliquam, vel laoreet est porttitor. Sed congue tincidunt arcu eget cursus.<br />Quisque aliquam laoreet quam et maximus. Pellentesque maximus ullamcorper ante, a elementum est dapibus at. Nulla feugiat leo sed turpis convallis suscipit vel dictum sapien. Vivamus luctus id nulla sit amet fermentum. Praesent sodales viverra enim ut malesuada. Ut in elit bibendum, mollis dui nec, faucibus enim. Vivamus ullamcorper sed augue at lacinia. Nunc tempus egestas massa id cursus. Integer vehicula enim et lacus suscipit, at posuere ante ullamcorper. Mauris condimentum eros in luctus blandit.</p>
<p>Curabitur posuere ornare enim. Nullam scelerisque vulputate risus, id consequat odio auctor interdum. Etiam eu ligula ut neque semper aliquam ut eget augue. Fusce in volutpat velit, sit amet gravida ipsum. Sed a consectetur nunc. Sed molestie scelerisque nunc nec pellentesque. Aliquam eget malesuada nulla, ut lobortis est.</p>
</section>
</div><!-- /.container -->
</body>
</html>
CSS
@import url("bootstrap/css/bootstrap.min.css");
nav#main-navigation.navbar {
border-radius: 0;
border: 0;
}
nav.affix {
position: fixed;
top: 0;
left: 0;
right: 0;
transform: translate3d(0px, 0px, 0px);
z-index: 1030;
width: 100%;
不幸的是它不起作用。爲了完整起見，我創建了一個JSFiddle： http：// jsfiddle。net/Gooly/escewot2/ – Toine
它在這裏看起來很好，甚至沒有修正：http：//jsfiddle.net/naveenkumarpg/escewot2/2/ –
它的工作原理應該如此，但頁面內容仍然會產生相同的「跳躍」 。檢查導航下方內容中的「關於」標題。一旦導航固定到頂部，它會突然跳起來。 – Toine