固定导航栏在滚动时不会停在正确的位置答案

【问题标题】：Fixed Navbar doesn't stop at right position when scrolling固定导航栏在滚动时不会停在正确的位置
【发布时间】：2021-02-16 22:50:31
【问题描述】：

我在页面顶部创建了一个固定导航栏，可以自动滚动到网页的某些部分。但是，它不会停在正确的位置，它总是滚动到离部分开头太远的地方。我需要它来停止精确，以便导航栏与新选定部分的开头连接。

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

【问题讨论】：

滚动到某些部分是什么意思？你能提供一个你具体想要实现的例子吗？
fixed position 表示它将在实际流程之外。结合anchor 定位，它将永远关闭。 anchor 定位将始终将目标元素移动到视口的最顶部，除非您使用 JS 脚本来偏移它。
@JoshKatofsky OP 正在使用一种名为 anchor 的技术，您使用的链接是：<a href="#id"></a>。使用#id 作为hyper reference 而不是普通的链接路径会将页面移动到具有ID 的特定元素。通常它会立即跳转到该部分，除非您使用此 css 行：html { scroll-behavior: smooth; } 然后滚动而不是跳转。您还可以将其与 css 中的 :target 选择器结合使用。

标签： html css scroll navbar

【解决方案1】：

您的代码的滚动行为是正确的：它将锚定部分移动到页面顶部。不幸的是，在这种情况下，固定的标题覆盖了部分的上部。据我所知，到目前为止，如果没有 js，您将无法更改这种特殊的滚动行为。

使用 HTML/CSS 修复它的一种简单技术是使用锚定部分顶部的分离锚元素。

在每个锚定部分的开头添加一个额外的空 div。将锚点 ID 移动到该 div。比将具有相对定位的 div 移动到顶部，因为您的标题具有高度。

注意事项：

使用这种技术，您不应将锚 ID 用于其他 css 样式。
如果您有一个响应式页面的标题高度不同，您需要针对每个不同的响应式视图调整锚定位的定位值。

这里有一个简短的解释 sn-p 只是为了解释该技术。您可以轻松地将其添加到所有部分的代码中。

解释 sn-p HTML：

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

解释 sn-p CSS：

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

【讨论】：

Holla ...我一直在快速...显然我的知识在这种情况下还没有更新;-)我添加了第二个答案，使用了更简单的纯 css 技术。

【解决方案2】：

除了我的第一个答案：

现在确实有一种（对我而言）更新的技术来防止页面使用锚链接滚动到固定标题后面。只需在锚定部分添加一行 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。

请自查：https://caniuse.com/?search=scroll-margin-top

【讨论】：