粘性页眉：5种让它们更好的方法

Page Laubheimer 说，如果您要使用粘性页眉…

1. 保持尺寸小巧。
2. 在视觉上与页面其余部分形成对比。
3. 如果它要移动，请保持最小化。（我会说，尊重 prefers-reduced-motion。）
4. 考虑“部分持久页眉”。（Jemima Abu 称之为 智能导航栏。）
5. 实际上，也许根本不要使用它。

我通常喜欢术语“粘性”页眉，因为它暗示您应该为它们使用 position: sticky，我认为您应该这样做。它以前是使用 position: fixed 完成的，但这样做更难实现，因为页眉将在文档流中进出移动。使用粘性定位有助于自动保留该空间，而无需 JavaScript 或 神奇数字。

直接链接 →