粘性導航欄功能失調
[英]sticky navigation bar dysfunctional
問題描述
我對 Web 開發比較陌生，我的一位家庭成員為我分配了一份實踐“工作”。 我在使用“粘性”功能時遇到了問題。 這是一個帶有下拉菜單的導航欄。 當我嘗試向下滾動以測試粘性功能時，它不起作用。
這是我的代碼示例：
.nav { position: sticky; } ul { list-style-type: none; margin: 0; padding: 0; background-color: #333; display: inline-block; min-width: 3990px; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1; } .dropdown:hover .dropdown-content { display: block; }
<body> <div class="nav" id="navbar"> <ul> <li> <a href="First_Page.html">Home</a> </li> <li> <a href="">About Us</a> </li> <li class="dropdown" id="navbar"> <a href="#" class="dropbtn">Dropdown</a> <div class="dropdown-content" id="navbar"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> </body>
這是一個“原型”，所以請不要太苛刻地判斷它。
祝你今天過得愉快。
2 個解決方案
解決方案1
0 2020-03-20 23:11:42
試試這個
.nav {
position: fixed;
}
解決方案2
0 2020-03-20 23:30:51
如果要使用粘性，則需要添加top或bottom屬性。 我建議你使用position: fixed代替。
body { /* just to see scroll */ min-height: 200vh; background: linear-gradient(black, white); } .nav { position: sticky; top: 0.5rem; /* half the font size */ } ul { list-style-type: none; margin: 0; padding: 0; background-color: #333; display: inline-block; min-width: 3990px; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1; } .dropdown:hover .dropdown-content { display: block; }
<body> <div class="nav" id="navbar"> <ul> <li> <a href="First_Page.html">Home</a> </li> <li> <a href="">About Us</a> </li> <li class="dropdown" id="navbar"> <a href="#" class="dropbtn">Dropdown</a> <div class="dropdown-content" id="navbar"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> </div> </body>
縮小粘性導航欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.