固定導航-無滾動

Question

您好，目前正在做一個快速網站，已設置標題和切換導航，但是由於導航欄已固定，如果導航欄高於屏幕高度，它將不允許在導航欄上滾動，請嘗試溢出：和位置相對，但似乎找不到解決方法，感謝您提供的任何幫助。

 function NavToggle() { var tn = document.getElementById("nav-bar") if(tn.style.display === "none"){ tn.style.display = "block"; } else { tn.style.display = "none"; } } 

 *{ box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; } html, body{ overflow-y: auto; } ul{ margin: 0; padding: 0; } /* Header and Navigation */ header{ width: 100vw; height: auto; background-color: #222; position: fixed; z-index: 1; } nav{ display: none; z-index: 2; } .title-wrapper{ display: flex; align-items: center; justify-content: space-between; height: 50px; width: 100vw; padding: 0 10px; } /* menu base styles */ nav ul{ list-style-type: none; } nav li{ height: 50px; } .title-wrapper>a{ font-size: 16px; } a{ color: #999; } nav a{ text-decoration: none; display: flex; align-items: center; justify-content: flex-start; height: 100%; font-size: 14px; padding-left: 10px; } nav a:hover{ color: #fff; } /* Menu Toggle Styling */ .menu-toggle{ font-size: 26px; color: #fff; cursor: pointer; padding: 0 15px 0 10px; display: flex; align-items: center; justify-content: center; } .menu-toggle-button{ padding: inherit; } 

 <header class="nav-wrapper header-container"> <div class="header-wrapper"> <div class="title-wrapper"> <a class="a-tag header-title">Chemical Finger Print Analysis</a> <div class="menu-toggle"> <span id="menu-toggle-button" onclick="NavToggle()">&#9776;</span> </div> </div> <nav id="nav-bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Data</a></li> <li><a href="#">Reports</a></li> </ul> <ul> <li><a href="#">Register</a></li> <li><a href="#">Login</a></li> </ul> </nav> </div> </header> 

Answer 1

您已經固定了整個<header>但是需要將title-wrapper固定為固定，這是工作代碼

 function NavToggle() { var tn = document.getElementById("nav-bar") if (tn.style.display === "none") { tn.style.display = "block"; } else { tn.style.display = "none"; } } 

 * { box-sizing: border-box; font-family: sans-serif; margin: 0; padding: 0; } html, body { overflow-y: auto; } ul { margin: 0; padding: 0; } /* Header and Navigation */ header { width: 100vw; height: auto; background-color: #222; position: relative; z-index: 1; } nav { display: none; z-index: 2; } .title-wrapper { display: flex; align-items: center; justify-content: space-between; height: 50px; width: 100vw; padding: 0 10px; position: fixed; background-color: #222222; } /* menu base styles */ nav ul { list-style-type: none; } nav li { height: 50px; } .title-wrapper>a { font-size: 16px; } a { color: #999; } nav a { text-decoration: none; display: flex; align-items: center; justify-content: flex-start; height: 100%; font-size: 14px; padding-left: 10px; } nav a:hover { color: #fff; } /* Menu Toggle Styling */ .menu-toggle { font-size: 26px; color: #fff; cursor: pointer; padding: 0 15px 0 10px; display: flex; align-items: center; justify-content: center; } .menu-toggle-button { padding: inherit; } 

 <header class="nav-wrapper header-container"> <div class="header-wrapper"> <div class="title-wrapper"> <a class="a-tag header-title">Chemical Finger Print Analysis</a> <div class="menu-toggle"> <span id="menu-toggle-button" onclick="NavToggle()">&#9776;</span> </div> </div> <nav id="nav-bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Data</a></li> <li><a href="#">Reports</a></li> </ul> <ul> <li><a href="#">Register</a></li> <li><a href="#">Login</a></li> </ul> </nav> </div> </header> 

Answer 2

只需添加overflow-y: auto;max-height: 100vh; 像這樣.header ：

 function NavToggle() { var tn = document.getElementById("nav-bar") if(tn.style.display === "none"){ tn.style.display = "block"; } else{ tn.style.display = "none"; } } 

 html, body{ overflow-y: auto; } ul { margin: 0; padding: 0; } /* Header and Navigation */ header { width: 100vw; height: auto; background-color: #222; position: fixed; z-index: 1; overflow-y: auto; overflow-x: hidden; max-height: 100vh; } nav { display: none; z-index: 2; } .title-wrapper{ display: flex; align-items: center; justify-content: space-between; height: 50px; width: 100vw; padding: 0 10px; } /* menu base styles */ nav ul{ list-style-type: none; } nav li{ height: 50px; } .title-wrapper>a{ font-size: 16px; } a{ color: #999; } nav a{ text-decoration: none; display: flex; align-items: center; justify-content: flex-start; height: 100%; font-size: 14px; padding-left: 10px; } nav a:hover{ color: #fff; } /* Menu Toggle Styling */ .menu-toggle{ font-size: 26px; color: #fff; cursor: pointer; padding: 0 15px 0 10px; display: flex; align-items: center; justify-content: center; } .menu-toggle-button{ padding: inherit; } 

 <header class="nav-wrapper header-container"> <div class="header-wrapper"> <div class="title-wrapper"> <a class="a-tag header-title">Chemical Finger Print Analysis</a> <div class="menu-toggle"> <span id="menu-toggle-button" onclick="NavToggle()">&#9776;</span> </div> </div> <nav id="nav-bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Data</a></li> <li><a href="#">Reports</a></li> </ul> <ul> <li><a href="#">Register</a></li> <li><a href="#">Login</a></li> </ul> </nav> </div> </header> 

希望這會幫助你。