固定導航欄在滾動時不會停在右側 position
[英]Fixed Navbar doesn't stop at right position when scrolling
問題描述
我在頁面頂部創建了一個固定的導航欄，它會自動滾動到網頁的某些部分。 然而，它並沒有停在右邊的 position 上，它總是滾動到離部分開頭太遠的地方。 我需要它來停止精確，以便導航欄與新選定部分的開頭連接。
@viewport { width: device-width; zoom: 1.0; } html { scroll-behavior: smooth; }:root { --base-color: #383E4C; --box-color: #F2F2F2; --border-color: #808080; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: white; font-family: 'Cabin', Arial, sans-serif; } /* homepage section */ #navbar { background-color: var(--base-color); width: 100%; height: 110px; overflow: hidden; position: fixed; top: 0; z-index: 1; } #navbar ul { list-style: none; color: white; position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } #navbar ul li { display: inline; font-size: 20px; border: 1px solid var(--border-color); padding: 18px 26px; margin-left: 10px; } #navbar ul li:hover { background-color: #646d7c; transition: 0.5s; } #navbar a { text-decoration: none; color: white; } #banner { margin-top: 110px; } #banner img { max-height: 100%; max-width: 100%; }.banner-image { position: relative; }.banner-items { position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* about section */.about-container { text-align: center; width: 100%; height: 800px; display: flex; flex-flow: row wrap; justify-content: center; }.infobox { background-color: var(--box-color); border: 1px solid var(--border-color); margin: 1px; width: 15%; height: 60%; margin: 80px 40px; }.about-container2 { margin-top: -200px; text-align: center; width: 100%; height: 800px; display: flex; flex-flow: row wrap; justify-content: center; }.infobox2 { background-color: var(--box-color); border: 1px solid var(--border-color); margin: 1px; width: 30%; height: 60%; margin: 80px 40px; }.infobox img { max-height: 100%; max-width: 100%; }.infobox2 img { width: 100%; height: 45%; }.infobox p { padding: 10px 20px; text-align: left; }.infobox2 p { padding: 20px 40px; }.infobox button { height: 40px; width: 80px; margin-top: 20px; border: none; border-radius: 20px; color: white; background-color: var(--base-color); }.infobox button:hover { height: 45px; width: 85px; cursor: pointer; transition: 0.25s; } /* service */ #services-banner { width: 100%; height: 300px; margin-top: -150px; } #services-banner h1 { color: white; font-size: 50px; text-shadow: 2px 2px black; }.services-image { position: relative; }.services-items { position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } #services-container { width: 100%; height: 800px; }
<.DOCTYPE HTML> <html lang="en" id="top"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style:css" media="screen" /> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Cabin:wght@600&display=swap" rel="stylesheet"> <title>Website Template</title> </head> <body> <div id="navbar"> <ul> <li><a href="#top">Homepage</a></li> <li><a href="#about-us">About Us</a></li> <li><a href="#services-banner">Services</a></li> <li>Contact</li> <li>External</li> </ul> </div> <div id="banner" class="banner-image" style="margin-top. 110px"> <img src="images/banner-mountains:jpg" alt="banner" /> <div class="banner-items"> <h1 style="font-size: 50px">Homepage Title</h1> <p style="font-size. 20px">Some long space filling text here</p> </div> </div> <div id="about-us" class="about-container"> <div class="infobox"> <img src="images/city,jpg" alt="city"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <button>Button</button> </div> <div class="infobox"> <img src="images/lake,jpg" alt="lake"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <button>Button</button> </div> <div class="infobox"> <img src="images/road,jpg" alt="road"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <button>Button</button> </div> </div> <div id="about-us2" class="about-container2"> <div class="infobox2"> <img src="images/forest,jpg" alt="forest"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. </p> </div> <div class="infobox2"> <img src="images/bridge,jpg" alt="bridge"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. </p> </div> </div> <div id="services-banner" class="services-image"> <img src="images/banner-services.jpg" alt="services-banner"> <div class="services-items"> <h1>Services</h1> </div> </div> <div id="services-container"> </div> </body> </html>
2 個解決方案
解決方案1
0 2021-02-17 03:42:04
您的代碼的滾動行為是正確的：它將錨定部分移動到頁面頂部。 不幸的是，在這種情況下，固定 header 覆蓋了部分的上部。 據我所知，到目前為止，如果沒有 js，您將無法更改這種特殊的滾動行為。
使用 HTML/CSS 修復它的一種簡單技術是使用錨定部分頂部的分離錨元素。
在每個錨定部分的開頭添加一個額外的空 div。 將錨點 ID 移動到該 div。 將具有相對定位的 div 移動到頂部，因為您的 header 具有高度。
筆記：
- 使用此技術，您不應將錨 id 用於其他 css 樣式。
- 如果 header 的響應頁面具有不同的高度，則需要為每個不同的響應視圖調整錨定位的定位值。
這里有一個簡短的 EXPLAINING 片段來解釋這項技術。 您可以輕松地將其添加到所有部分的代碼中。
解釋片段 HTML：
<div class="about-container">
<div id="about-us" class="menu-anchor"><!-- empty anchor element --></div>
This is an anchored section.
... your html ...
</div>
解釋片段 CSS：
.menu-anchor {
position: relative;
top: -110px /* value = height of fixed header */
}
解決方案2
0 2021-02-17 03:55:27
除了我的第一個答案：
事實上，現在有一種（對我來說）更新的技術來防止頁面使用錨鏈接滾動到固定標題后面。 只需在 css 的錨定部分添加一行：
.anchored-section {
scroll-margin-top: 110px; /* value = height of fixed header */
}
請參閱： https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
更新：
似乎這確實是一種新技術，尚未在所有瀏覽器中實現。 作為實際的 Chrome，Firefox 和 Edge 等支持它，Safari 似乎有問題！ 從canIuse.com ，Safari 應該使用屬性scroll-snap-margin-top而不是scroll-margin-top 。
固定的導航欄在不在頂部且不滾動時消失的問題無法按預期工作
[英]Fixed navbar that disappears when not on top and not scrolling isn't working as intended
當滾動元素的底部到達父元素的結尾時，停止jQuery固定位置滾動
[英]Stop jQuery fixed position scrolling when bottom of scrolling element reaches end of parent element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.