如何在滚动时创建无 JavaScript 的收缩头部

想象一个网站的头部，它很厚，在内容的顶部和底部有大量的填充。当您向下滚动时，它会自行收缩，减少一些填充，为其他内容提供更多的屏幕空间。

通常，您需要使用一些 JavaScript 来添加类似的收缩效果，但自从引入 position: sticky 以来，可以使用 CSS 来实现这一点。

让我先说清楚：我通常不喜欢粘性头部。我认为它们占用了太多屏幕的空间。但是，您是否应该在自己的网站上使用粘性头部是一个不同的问题。这实际上取决于您的内容以及始终存在的导航是否为其添加了价值。如果您使用它，请格外注意避免无意中使用粘性区域覆盖或遮挡内容或功能——这相当于 数据丢失。

无论哪种方式，以下是如何在没有 JavaScript 的情况下实现它，从标记开始。这里没有什么复杂——一个 <header> 只有一个后代 <div>，它反过来包含徽标和导航。

<header class="header-outer">
  <div class="header-inner">
    <div class="header-logo">...</div>
    <nav class="header-navigation">...</nav>
  </div>
</header>

就样式而言，我们将为父 <header>（120px）声明一个高度，并将其设置为一个灵活的容器，将它的后代居中对齐。然后，我们将使其粘性。

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
}

内部容器包含所有头部元素，例如徽标和导航。内部容器在某种程度上是实际头部，而父 <header> 元素的唯一功能是使头部更高，以便有东西可以收缩。

我们将为该内部容器 .header-inner 设置一个 70px 的高度，并将其设置为粘性。

.header-inner {
  height: 70px;
  position: sticky;
  top: 0; 
}

那个 top: 0？它在那里是为了确保容器在变为粘性时将自己安装在最顶部。

现在是诀窍！为了使内部容器真正粘在页面的“天花板”上，我们需要为父 <header> 提供一个负 top 值，该值等于两个容器之间的高度差，使其“在”视窗上方粘贴。那是 70px 减去 120px，留下了——请鼓掌——-50px。让我们添加它。

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  top: -50px; /* Equal to the height difference between header-outer and header-inner */
  height: 120px;
}

现在让我们把它们放在一起。<header> 会从框架中滑出，而内部容器会整齐地放置在视窗的顶部。

我们可以将其扩展到其他元素！如何使用持久性警报？

虽然我们可以在 CSS 中做到这一点，但这确实有限制。例如，内部和外部容器使用固定高度。这使它们容易发生变化，例如，如果导航元素因为菜单项数量超过空间而换行。

另一个限制？徽标不能缩小。这可能是最大的缺点，因为徽标通常是占用空间的最大罪魁祸首。也许有一天，我们可以根据元素的粘性应用样式……