「译」如何不用JavaScript创建一个可粘性的滚动头

最新推荐文章于 2021-06-03 14:42:43 发布

33子～

最新推荐文章于 2021-06-03 14:42:43 发布

阅读量124

点赞数

分类专栏：译文

本文链接：https://blog.csdn.net/weixin_46254175/article/details/114371754

版权

译文专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原文：How to Create a Shrinking Header on Scroll Without JavaScript
原作者：Håvard Brynjulfsen
译者：33子～

想象下一个网站的头部很好并且很厚，带有大量的padding在内容的顶部和底部。当你向下滑动的时候，它会自己伸缩起来，减少一些padding，为其他内容提供了更多的空间。

通常你必须使用一些JavaScript添加一个伸缩的功能就像上面说的那样，但是有一种方法仅仅是通过CSS来实现它，因为引入了position：sticky。

让我先把话说清楚：我一般不喜欢粘性头部。我认为它们占据了屏幕太多空间。是否你应该在你自己的网站上是有粘性的头部，然而，这是另一个问题。它通常依赖你的内容和是否一个始终存在的导航会增加它的价值。如果你想使用它，要额外注意避免无意覆盖或者模糊可伸缩区域的内容-------会导致数据丢失。

无论怎样，开始怎样不用JavaScript实现它，开始标记。这没啥复杂的-一个<header> 带着一个子盒子<div> ，包括logo和导航。

<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;
}

这个里面的容器包含所有的头部元素，比如logo和导航。里面的容器在某方面来说是实际的「头」，而父元素仅有的功能是使「头」更高以至于有一些东西可以伸缩。

我们给里面的容器，.header-inner，一个70px的高度并且也让它粘性定位。

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

top:0？这是确保当容器变得粘性的时候自动的固定在最顶部。

现在开始把戏了！为了里面的容器精准地粘在页面的“天花板”，我们需要给父级<header> 一个负的top值，这个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;
}