如何在滾動時固定導航欄中的按鈕
[英]How to fixed the button in navigation bar on scrolling
問題描述
我的導航欄中有6個字段。 其中5個是鏈接，一個是下拉列表。 當我滾動頁面時，除下拉字段外，所有字段均保持固定。 在此處輸入圖片說明
下面是我的代碼：
<div class="collapse navbar-collapse" id="Food-fair-toggle"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">about</a></li> <li><a href="#pricing">menu</a></li> <li><a href="#featured-dish">featured</a></li> <li><a href="#reserve">reservation</a></li> <li><a href="#contact">contact</a></li> <li> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="https://deliveroo.nl/">Deliveroo</a> <a href="https://www.foodora.nl/">Foodora</a> <a href="https://www.ubereats.com//">UberEats</a> </div> </div> </li> </ul> </div> <!-- /.navbar-collapse -->
3 個解決方案
解決方案1
0 2018-10-18 05:34:34
解決方案2
0 2018-10-18 06:50:09
請嘗試以下HTML，JS和CSS。 只需更改結構，為同一類創建單獨的下拉列表。 然后，您必須為菜單UL添加id屬性。
HTML：
<div class="collapse navbar-collapse" id="Food-fair-toggle">
<ul class="nav navbar-nav navbar-right" id="myHeader">
<li><a href="#about">about</a></li>
<li><a href="#pricing">menu</a></li>
<li><a href="#featured-dish">featured</a></li>
<li><a href="#reserve">reservation</a></li>
<li><a href="#contact">contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="https://deliveroo.nl/">Deliveroo</a>
<a href="https://www.foodora.nl/">Foodora</a>
<a href="https://www.ubereats.com//">UberEats</a>
</div>
</div>
</li>
</ul>
</div>
JS：
將JS復制並粘貼到頁腳部分。
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
CSS：
ul.sticky {
position: fixed !important;
background: #27752A;
}
解決方案3
0 2018-10-18 07:24:00
下面的示例顯示了如何在bootstrap-4導航欄中添加下拉菜單。
如果要在頂部固定導航欄，則可以在<nav>組件中添加class='fixed-top' ，然后在向下滾動時菜單將停留在頂部。
或者，如果您不希望將導航欄菜單固定在頂部，則可以從導航欄中刪除該類fixed-top菜單。
<!DOCTYPE html> <html lang="en"> <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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="bg-success navbar navbar-dark navbar-expand-sm"> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#about">ABOUT</a> </li> <li class="nav-item"> <a class="nav-link" href="#pricing">MENU</a> </li> <li class="nav-item"> <a class="nav-link" href="#featured-dish">FEATURED</a> </li> <li class="nav-item"> <a class="nav-link" href="#reserve">RESERVATION</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">CONTACT</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> DROPDOWN </a> <div class="dropdown-menu"> <a class="dropdown-item" href="https://deliveroo.nl/">Deliveroo</a> <a class="dropdown-item" href="https://www.foodora.nl/">Foodora</a> <a class="dropdown-item" href="https://www.ubereats.com//">UberEats</a> </div> </li> </ul> </nav> <br> <div class="container"> <h3>Navbar With Dropdown</h3> <p>This example adds a dropdown menu in the fixed navbar on Top,This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top.</p> </div> </body> </html>
如何創建一個滾動后固定在頂部的粘性導航欄
[英]How to create a sticky navigation bar that becomes fixed to the top after scrolling
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.