[英]Bootstrap, how make a navbar sticky after scrolling down when using viewport height?
[英]Bootstrap, make a navbar sticky after scrolling down?
我有一個位於標題圖像下方的導航欄。 當我向下滾動時,我希望導航欄粘在網頁的頂部。 我想不到所需的jQuery或CSS,因為導航欄似乎粘在標題圖像的正下方,留下了一些空白。
<div class="headerwrap pull-center">
<div class="container">
<div id="header" class="row-fluid">
<div class="span5" id="phones">
<img class="phone" src="img/white.png" alt="">
</div>
<div class="span7" id="mm-logo">
<img class="mm-log" src="img/logo.png" alt="">
</div>
</div>
</div>
</div>
<div class="navbar navbar-inner" id="border-stuff">
<div class="span12">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 768px or less, place within here -->
<div class="nav-collapse collapse" id="center-nav">
<ul class="nav" >
<li><a href="#h1"><h3>Heading1</h3></a></li><li class="divider-vertical"></li>
<li><a href="#h2"><h3>Heading2</h3></a></li><li class="divider-vertical"></li>
<li><a href="#h3"><h3>Heading3</h3></a></li><li class="divider-vertical"> </li>
<li><a href="#h4"><h3>Heading4</h3></a></li><li class="divider-vertical"></li>
<li><a href="#h5"><h3>Heading4</h3></a></li>
</ul>
</div>
</div>
</div>
如果您希望導航欄只在標題圖像滾動后保持固定在屏幕頂部,您可以使用bootstrap affix插件 。
您只需要將Jquery代碼替換為:
$('#sidebar').affix({
offset: {
top: 50
}
});
並將頂部調整到最適合的地方。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.