position:sticky新特性

一、Chrome杀了个回马枪

position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，Chrome什么时候杀了个回马枪，居然又支持了。眼瞅着，各个浏览器纷纷立了山头，要必要关心关心position:sticky了，不要被人留下厚此薄彼的口舌。

Safari目前还需要-webkit-私有前缀。

二、position:sticky简介

单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，当元素要滚出显示器屏幕时，表现为fixed。例如，可以滚动下面这个框框感受下交互表现：
position:sticky实现的富有层次的滚动交互demo

注意：

sticky是相对于滚动的父窗口
不仅要设置position: sticky; 还要设置top、left、等那4个属性
sticky相当于是relative和fixed的结合体，在没有sticky以前，一般通过监听滚动事件，当到达某个高度后将CSS属性的relative改变为fixed来实现吸附，现在有了sticky，就更方便了，但是注意的是sticky的兼容性问题。

快速生成HTML标签方法：

ul>li{nihao$}*3

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>article {max-width: 600px;margin: 1em auto;height: 300px;overflow: auto;}article h4,article footer {position: -webkit-sticky; /* for Safari */position: sticky;}article h4 {margin: 2em 0 0;background-color: #333;color: #fff;padding: 10px;top: 0;z-index: 1;}article content {display: block;background-color: #ffffe0;position: relative;padding: 1px 10px;}article footer {background-color: red;padding: 10px;bottom: 20vh;z-index: -1;}</style></head><body><article><section><h4>网曝某某某</h4><content><p>12月2日，有网友爆料称12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称.12月2日，有网友爆料称....</p></content><footer>网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论网友评论：...</footer></section><section><h4>知情人他他他</h4><content><p>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿v...</p></content><footer>网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论网友神评论：...</footer></section>...</article></body>
</html>

三、你可能不知道的position:sticky

position:sticky有个非常重要的特性，那就是sticky元素效果完全受制于父级元素们。

这和position:fixed定位有着根本性的不同，fixed元素直抵页面根元素，其他父元素对其left/top定位无法限制。

根据我简单的测试，发现了sticky元素以下一些特性表现：

父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。
2019-05-22新增
父级元素设置和粘性定位元素等高的固定的height高度值，或者高度计算值和粘性定位元素高度一样，也没有粘滞效果。我专门写了篇文章深入讲解了粘性效果无效的原因，可以点击这里查看。
同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，且这些父元素正好紧密相连，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。至于原因需要理解粘性定位的计算规则，同样点击这里查看。
sticky定位，不仅可以设置top，基于滚动容器上边缘定位；还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。

下面，我们再看看看富有层次的滚动效果的实现原理。

四、层次滚动实现原理

首先，HTML结构如下（结构很重要）：

<article><section><h4>网曝王宝强殴打马蓉</h4><content><p>12月2日，有网友爆料称...</p></content><footer>网友评论：...</footer></section><section><h4>知情人爆料称马蓉闯入王宝强家拿剪刀对峙</h4><content><p>...</p></content><footer>网友评论：...</footer></section>...
</article>

其中，标题<h4>和底部<footer>设置了sticky定位，如下：

article h4,
h4 {position: sticky;top: 0;z-index: 1;
}
content {position: relative;
}
footer {position: sticky;bottom: 50vh;z-index: -1;
}

由于每一段短新闻都在section标签中，属于不同的父元素，因此，滚动的时候，后面的新闻标题才能把前面已经sticky定位的新闻标题推开，这是sticky定位天然的特性，无需任何JavaScript的帮助。

如果，我们这里的HTML结构做调整，标题都是平级的，如下：

<article><section><h4>网曝王宝强殴打马蓉</h4><content><p>12月2日，有网友爆料称...</p></content><footer>网友评论：...</footer><!-- 下一个短新闻 --><h4>知情人爆料称马蓉闯入王宝强家拿剪刀对峙</h4><content><p>...</p></content><footer>网友评论：...</footer></section>...
</article>

则最终效果是所有sticky定位的新闻标题都会重叠在一起，这并不是我们想要的效果。所以，记住了，position:sticky布局的时候，使用合适的HTML结构很重要。

效果中，网友评论从后面钻出来的效果又是如何实现的呢？

两个关键点：

定位用的bottom，效果和top正好是对立的。设置top粘滞的元素随着往下滚动，是先滚动后固定；而设置bottom粘滞的元素则是先固定，后滚动；
z-index:-1让网友评论footer元素藏在了content的后面，于是才有了“犹抱琵琶半遮面”的效果。

参考链接1：https://www.zhangxinxu.com/wordpress/2018/12/css-p
osition-sticky/

参考链接2