Bootstrap 4 滾動到粘性導航
[英]Bootstrap 4 scroll to sticky nav
問題描述
當我滾動過去時，我很難讓我的引導程序 4 導航欄粘在頁面的頂部。 我一定嘗試過在 Stackoverflow 和谷歌資源上找到的 10 種不同的代碼，但都沒有成功。
這是html：
<!--new navbar-->
<nav name="navbar" class="navbar navbar-toggleable-md navbar-inverse bg-inverse" data-toggle="sticky-onscroll" role="navigation" id="navbar">
<a class="" href="#">
<img class="mini-logo" src="miniNest.png" alt="Responsive image">
</a>
<div class="center-nav ">
<button class="hidden-sm-up navbar-toggler-right navbar-btn" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="btn-group mr-2 collapse navbar-collapse alignm" id="navbarSupportedContent" aria-label="First group">
<button type="button" class="navbar-btn btn btn-primary btn-xlg">blah blah <br><sub class="sub">credentials</sub></button>
<button type="button" class="navbar-btn btn btn-primary btn-xlg">blah</button>
<button type="button" class="navbar-btn btn btn-primary btn-xlg">blah</button>
<button type="button" class="navbar-btn btn btn-primary btn-xlg">blah</button>
</div>
<!--button group-->
</div>
<!--center-nav-->
</nav>
<!--new navbar-->
這是我認為最有可能成功的，但仍然過去。
$(window).scroll(function() {
if( $(this).scrollTop() > 150 ) {
$(".navbar").addClass("fixed-top");
} else {
$(".navbar").removeClass(""fixed-top);
}
});
我在構建導航欄時做錯了什么嗎？
2 個解決方案
解決方案1
0 2017-08-05 09:06:04
您可以使用此代碼，它就像您想要的那樣，無需任何 JS，只需編輯類以放置您自己的類。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Home</title> <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> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <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 class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div class="container"> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> <h3>Collapsible Navbar</h3> <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). <p>Only when the button is clicked, the navigation bar will be displayed.</p> </div> </body> </html>
解決方案2
0 2020-01-30 14:31:43
sticky-top類為您完成工作。 但請記住，並非所有瀏覽器都完全支持此實用程序。 鏈接
示例：
<header class="sticky-top">
<nav>
...
</nav>
</header>
粘性導航並滾動到最混亂的地方
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.