你可能不知道的position: sticky

一、引言

你是否和我一样，CSS定位只知道static、relative、absolute、fixed

我们还知道一个非常有用的定位公式：父相子对（父元素设置relative, 子元素设置absolute）

如果要把导航栏固定到顶部，简单，{ position: fixed } 搞定~

思考一下：如果我们的导航栏在内容中间，随着内容的滚动实现吸顶效果，该如何实现呢？

首先我想到的是：判断滚动距离，如果滚动到顶部区域，给元素添加 { position: fixed } 。这样做肯定能实现，并且很多教程教你这样做。不过还有另一种只需要CSS就能实现的方法，在这里我要隆重介绍一下我们今天的主角：position:sticky

二、简介

单词sticky的中文意思是“粘性的”，position:sticky 表现也符合这个粘性的表现。基本上，可以看出是 position:relative 和  position:fixed 的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。我们来感受一下：

 其中导航元素设置了如下CSS：

nav {
    position: sticky;
    top: 0;
}

这就是position:sticky最基本的表现，特别适合导航的跟随定位效果和富有层次的滚动交互。

参考文章：

杀了个回马枪，还是说说position:sticky吧 « 张鑫旭-鑫空间-鑫生活

position - CSS: Cascading Style Sheets | MDN