如何在没有JS的情况下制作粘性的导航吧？

我要创建粘滞的导航栏。在滚动过程中，它应该漂浮在内容上，如果页面滚动到顶部，它应该显示在内容之前。

我的实现几乎正常工作，但当页面滚动到顶部时，部分内容与导航栏重叠。

每次更改窗口大小(请参阅fixContentPadding函数)时，我都会更新padding-top的padding-topCSS属性，从而使其能够与JS一起使用。

没有JS可以做到这一点吗？

举个例子：

function fixContentPadding() {
  const navbarElement = document.getElementById("navbar");
  const contentElement = document.getElementById("content");

  contentElement.style.paddingTop = navbarElement.offsetHeight + "px";
}

document.addEventListener("resize", fixContentPadding);
document.addEventListener("DOMContentLoaded", fixContentPadding);

#navbar {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background: lightblue;
}

#content {
  min-height: 200vh;  /* to demonstrate scrolling */
  border: 1px solid lightblue;
}

<div id="navbar">
  <a href="/">Hello, World!</a>
</div>

<div id="content">
  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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

---

解决方案

这就是position: sticky的用途：

#navbar {
  position: sticky;
  top: 0;
  background: aliceblue;
}

<div id="navbar">
  <a href="/">Hello, World!</a>
</div>

<div id="content-container">
  <div id="content">
    <p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p><p>Hello, World!</p>
  </div>
</div>