如何在滚动正文内容时给定上边距以避免透明固定Header下的内容显示？

Question

我有一些部分的正文内容和一个透明背景的 header。 当我滚动正文内容时，它显示在 header 后面。 我无法控制更改 header 的背景。 所以，我正在寻找一种方法来保持正文部分的上边距。

我宁愿在不使用 Javascript 的情况下解决这个问题。

我在网上寻找解决方案，但没有任何帮助。 我在这里创建了一个示例来查看它。

 /** * Layout */ body { margin: 0 auto; max-width: 40em; width: 88%; }.section { color: #ffffff; height: 75vh; margin: 0; scroll-margin-top: 1em; } #a { background-color: #0074d9; } #b { background-color: #2ecc40; } #c { background-color: #ff851b; } #d { background-color: #b10dc9; } h2 { margin: 0; padding: 0; } /** * Sticky navigation */.sticky { position: -webkit-sticky; position: sticky; top: 0; } /** * Display lists on a single line. * @bugfix Prevent webkit from removing list semantics * 1. Add a non-breaking space * 2. Make sure it doesn't mess up the DOM flow */.list-inline { background: transparent, list-style: none; margin-left: -0.5em; margin-right: -0.5em; padding: 0; }.list-inline > li { display: inline-block; margin-left: 0.5em; margin-right: 0.5em; }.list-inline > li:before { content: "\200B"; /* 1 */ position: absolute; /* 2 */ }

 <nav class="sticky"> <h1>Header</h1> <ul class="list-inline"> <li><a href="#a">Section A</a></li> <li><a href="#b">Section B</a></li> <li><a href="#c">Section C</a></li> <li><a href="#d">Section D</a></li> </ul> </nav> <main> <article class="section" id="a"><h2>Section A</h2></article> <article class="section" id="b"><h2>Section B</h2></article> <article class="section" id="c"><h2>Section C</h2></article> <article class="section" id="d"><h2>Section D</h2></article> </main>

任何帮助，请。 如果我能用 CSS 来解决这个问题，那就太棒了。 随意给 header 一个固定的高度。

Answer 1

为了解决这个问题，我们可以做的是让页面的主体不可滚动，而是让页面的“主要”部分可滚动。 您可以通过添加min-height: 100vh;来做到这一点。 和overflow: hidden; 到 CSS 的主体部分。 接下来你需要让你的导航（.sticky）有一个设定的高度（你喜欢的任何东西）（例如.sticky {height: 100px;} 。一旦完成，你最终可以为你的“主要”标签添加一个 CSS 部分应包括以下内容：

main {
height: calc(100vh - [HEIGHT OF NAV]);
overflow: auto;
}