React-sticky的吸顶效果实现

（一）前言

相信大多数和我一样，对于postion的属性，依然保留在static，relative，absolute和fixed。而且在这篇文章之前，如果我要实现一个悬浮效果，解决方案监听scroll的位置，动态修改需要定位的元素postion为fixed，以达到定位的效果。但是在了解到react-sticky后，我发现作者提到了postion:sticky，吓得我马上查阅下sticky是什么。

• 这是w3cSchool的解释

position: sticky;根据用户的滚动位置定位元素。

粘性元素在relative和之间切换fixed，具体取决于滚动位置。它被相对定位，直到在视口中满足给定的偏移位置 - 然后它“粘住”到位（如位置：固定）。

w3cSchool

这是一篇介绍文章

当然，对于不熟悉的css3属性，我们首先需要了解是其兼容性。

然后发现在不考虑ie和open minin的情况下，对现代浏览器的兼容性还算友好，但是因为浏览器尚未完全支持，建议谨慎使用。

（二）吸顶demo
惯例，既然我们已经提到了sticky，不妨为他先写个demo，看下官方文档给出的例子，具体实现是什么样子。

在线demo链接
运行上面例子你可以看到，当页面滚动到顶部，sticky元素会自动吸顶，但是因为父亲容器高度只有400，当我们超过这个高度后，吸顶元素就会变为普通文档流。这种设计，就可以很容易实现联系人列表那种头部字母吸顶效果。

（三）react-sticky 源码解析

首先我们打开src文件，发现只有两个文件，一个Container.js，一个Sticky.js。

1. 首先在容器组件中，绑定以下事件

events = [
   "resize",
   "scroll",
   "touchstart",
   "touchmove",
   "touchend",
   "pageshow",
   "load"
 ];

然后在监听回调中，使用raf库控制动画，然后使用React的Context设计模式和观察者模式，使用subscribers list遍历里面的元素

2. 在sticky里面，生成两个兄弟元素，分别是placeholder（用作吸顶元素脱离文档流占位）和吸顶元素。而这里的吸顶元素，采用React的render props设计模式，通过React.cloneElement api将children当作function，并为他传入以下方法

style （object） - 可修改的样式属性，可选择传递给此函数返回的元素。对于许多用途，这将是唯一需要的属性。
isSticky （布尔值） - 当前事件导致的元素是粘性的吗？
wasSticky （布尔值） - 当前事件之前的元素是粘性的吗？
distanceFromTop （数）的像素的数量从的顶部- Sticky至最接近StickyContainer的顶部
distanceFromBottom （数）的像素的数目从所述的底部- Sticky至最近StickyContainer的底部
calculatedHeight （number） - 此函数返回的元素的高度

3. 提供不同模式

- relative到true。window事件不会触发粘性状态更改。仅在最近的内滚动StickyContainer可以触发粘性状态更改
- 并且支持联系人列表的多头替换吸顶效果（Stacked模式）
-  disableHardwareAcceleration属性用于关闭动画的硬件加速（transform:"translateZ(0)"）。
- 作者本身因为ie不支持，没使用sticky，所以依然使用的fixed，所以，如果各位浏览器不考虑全浏览器兼容，也可以选择sticky的方案

（四）react-sticky 吸顶功能实现

首先我们不考库本身已经实现的功能，先实现一个简单的吸顶功能，然后，根据作者库的扩展，对应的扩展我们的demo。

一般来说源码解析，分两步.

第一步, 基于理论是实践的基础，分析作者内部实现思路，然后注意其内部实现的关键点和难点ÿ