如何在滚动时固定导航栏中的按钮
[英]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.