html - 如何在固定导航栏/标题后面移动滚动条

Question

我希望滚动条位于 my website 中顶部固定导航栏的后面.
我在 following website 看到过类似的东西(obsidian.md) 滚动条位于导航栏后面，类为“app-header”，但我不知道他们是如何做到的。
下面是上面网站的截图(obsidian.md)
注意:我删除了标题上的背景过滤器:blur(5px) 样式以使其可见屏幕截图:

Answer 1

您将导航栏绝对定位到顶部。然后你用一个高度为 100vh 的包装器代替 body - 填充顶部 + 底部。这样内容包装器将填充整个屏幕高度。然后给内容包装器一个溢出规则。

body {
  margin: 0px;
  padding: 0px;
}

.content p {
  margin-bottom: 2000px;
}

.content {
  overflow-y: scroll;
  height: calc(100vh - 75px);
  padding: 5px;
  padding-top: 65px;
}

.navbar {
  position: absolute;
  top: 0;
  background-color: rgba(255, 0, 0, 0.5);
  height: 60px;
  z-index: 2;
  width: 100%;
}

<div class="navbar">navbar</div>
<div class="content">
  <p>dummy</p>
</div>