固定导航栏在滚动时不会停在右侧 position

Question

I've created a fixed Navbar on the top of the page that automatically scrolls to certain sections of the webpage.我在页面顶部创建了一个固定的导航栏，它会自动滚动到网页的某些部分。 However, it doesn't stop at the right position, it's always scrolls a little too far off the section beginning.然而，它并没有停在右边的 position 上，它总是滚动到离部分开头太远的地方。 I need it to stop exaclty so that the navbar connects with the beginning of the new selected section.我需要它来停止精确，以便导航栏与新选定部分的开头连接。

 @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>

Answer 1

The scrolling behaviour of your code is correct: it moves the anchored section to the top of the page.您的代码的滚动行为是正确的：它将锚定部分移动到页面顶部。 Unfortunately fixed header covers the upper parts of the sections in that case.不幸的是，在这种情况下，固定 header 覆盖了部分的上部。 As I know you cannot change this special scrolling behaviour without js up to now.据我所知，到目前为止，如果没有 js，您将无法更改这种特殊的滚动行为。

One simple technique to fix it with HTML/CSS is to work with separated anchor elements on the top of the anchored sections.使用 HTML/CSS 修复它的一种简单技术是使用锚定部分顶部的分离锚元素。

Add an additional empty div to the beginning of every anchored section.在每个锚定部分的开头添加一个额外的空 div。 Move anchor id to that div.将锚点 ID 移动到该 div。 Than shift the div with a relative positioning as far to the top as your header has height.将具有相对定位的 div 移动到顶部，因为您的 header 具有高度。

Notes:笔记：

With this technique you should not use the anchor id's for other css styling.使用此技术，您不应将锚 id 用于其他 css 样式。
If you have a responsive page with different heights for the header you need to adapt the value for the positioning of the anchor positioning for every different responsive view.如果 header 的响应页面具有不同的高度，则需要为每个不同的响应视图调整锚定位的定位值。

Here a short EXPLAINING snippet just to explain the technique.这里有一个简短的 EXPLAINING 片段来解释这项技术。 You can add that easily to your code for all sections.您可以轻松地将其添加到所有部分的代码中。

EXPLAINING snippet HTML:解释片段 HTML：

<div  class="about-container">
   <div id="about-us" class="menu-anchor"><!-- empty anchor element --></div>
   This is an anchored section.
   ... your html ...
</div>

EXPLAINING snippet CSS:解释片段 CSS：

.menu-anchor {
   position: relative;
   top: -110px /* value = height of fixed header */
}

Answer 2

Additional to my first answer:除了我的第一个答案：

Indeed there is a (for me) newer technique now to prevent the page to scroll behind fixed headers using anchor links.事实上，现在有一种（对我来说）更新的技术来防止页面使用锚链接滚动到固定标题后面。 Just add to the anchored section one line of css:只需在 css 的锚定部分添加一行：

.anchored-section {
    scroll-margin-top: 110px;  /* value = height of fixed header */
}

See: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top请参阅： https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top

UPDATE:更新：

Seems that this indeed is a newer technique which is not implemented in all Browsers yet.似乎这确实是一种新技术，尚未在所有浏览器中实现。 As actual Chrome, Firefox and Edge and others support it there seems to an issue with Safari!作为实际的 Chrome，Firefox 和 Edge 等支持它，Safari 似乎有问题！ As of canIuse.com for Safari should be used the atrribute scroll-snap-margin-top instead of scroll-margin-top .从canIuse.com ，Safari 应该使用属性scroll-snap-margin-top而不是scroll-margin-top 。

Please check yourself: https://caniuse.com/?search=scroll-margin-top请自行检查： https://caniuse.com/?search=scroll-margin-top

固定导航栏在滚动时不会停在右侧 position

问题描述

2 个解决方案

解决方案1
0 2021-02-17 03:42:04

解决方案2
0 2021-02-17 03:55:27

固定导航栏在滚动时不会停在右侧 position

问题描述

2 个解决方案

解决方案1 0 2021-02-17 03:42:04

解决方案2 0 2021-02-17 03:55:27

解决方案1
0 2021-02-17 03:42:04

解决方案2
0 2021-02-17 03:55:27