具有固定页眉的页面上的粘性子标题

Question

我有一个带有固定页面顶部标题（网站名称、菜单等）的网页，以及包含我希望粘贴的子标题的内容。我想过在 CSS 中执行此操作的两种方法，但都不起作用：

使用
```
position: fixed
```
或
```
position: sticky
```
作为页眉。这会导致页面的其余部分在页眉下方滚动，因此其子标题在粘贴时不可见。它们粘在页面的顶部（位于页眉下方），而不是粘在自己可见部分的顶部。
使用 flex 或 grid 或其他任何方式将页面垂直分成两部分：标题和可滚动的主部分。这会导致子标题正确地粘在主部分的顶部，但有两个问题。一是
```
#fragments
```
不再可靠地工作，因为锚点位于嵌套滚动块内。第二个更严重的问题是，它会触发移动 Safari 中的各种错误，其中浏览器尝试将焦点文本输入字段垂直居中，并且它通过强制整个页面（而不仅仅是主要部分）滚动来实现这一点。一旦发生这种情况，视图就会卡住，必须重新加载页面才能使其再次正确滚动。这是别人关于此问题的 StackOverflow bug 和他们的问题视频。（如果没有嵌套滚动 div，该错误也可能发生，但使用嵌套滚动 div 时情况会更糟。）

似乎固定页眉是很常见的事情，而想要粘性子标题是很常见的事情，但我无法两者兼得。我调查了各种知名移动网站（Google Docs、reddit、StackOverflow、MDN），它们都使用上面的选项 1 并放弃粘性子标题。

关于如何在不制作自己的嵌套滚动块的情况下使粘性子标题发挥作用，有什么想法吗？或者如何解决 Safari 的滚动错误？

Answer 1

如果不看你的代码，我无法做出任何定义的答案，但从我正在阅读的内容来看，选项 #1 是可行的。

通常，导航标题栏上的

position: sticky

会自动下推主容器，如果没有自动下推主容器并覆盖您的子标题和内容，您可以随时添加顶部填充来下推主要部分内容（包括您的子标题） .

说这是你的代码，

<body>
<nav class="navbar" role="navigation">Page Header</nav>
<main class="main-content">Your main content with subheader</main>
</body>

如果使用

position: fixed

：

.navbar {position: fixed; top: 0; height: 100px; z-index: 9999}

.main-content { padding-top: 100px; (if your page header is 100px height) }

此外，根据断点调整填充。