防止锚链接消失在粘性标题后面

粘性标题是一种常见的布局，可以在许多网站上看到。问题是它不能很好地处理锚链接。

假设我们有一个包含不同锚链接的目录。每个锚都会将用户带到页面中的特定 section。

当用户单击定位点时，页面将滚动到目标 section。但该 section 的某些部分显示在标题下，这对用户来说不是一个好的体验。

为了防止这种情况发生，我们希望在目标的顶部添加一个边距，但它仅在滚动时有效。此时，scroll-margin-top 就派上了用场。

header {
  height: 2rem;
}

section {
  scroll-margin-top: 2rem;
}