在上一篇文章使用getBoundingClientRect方法实现简洁的sticky组件的方法介绍了一个sticky组件的简洁实现，经过这两天的思考，发现上次提供的实现还有较多不足的地方，另外跟别的网站上实现的效果在取消固定的时候也有一些不同，上次提供的取消固定的处理方式不好，本文在上文的基础上，提供一个改进版的sticky组件，功能更加完善，希望您有兴趣阅读。
1. 旧版本的问题
上一个sticky组件的实现中，有多个问题存在：
第一，从sticky的效果上来说，sticky元素在固定前后，不会变化的是相对浏览器左边的位置以及sticky元素的整体宽度，可能会变化的是相对浏览器顶部或底部的位置和sticky元素的高度，而上文提供的实现中把后面两个会变化的值都当成了不变的值。为什么在固定的时候top值或bottom值就一定是0？当然可以不是0阿，比如top: 20px，bottom: 15px，在某些场景里，加上一些这样的偏移，sticky的效果会更好看，比如bootstrap官方文档中用到的affix组件实例（这个组件的功能跟本文实现的sticky组件是差不多的）：
它就把固定的时候，相对浏览器顶部的位置设置成了top: 20px。sticky元素的高度也是，为了在固定的时候显示更好看的效果，调整原来的Line-height或者padding-top等更高度有关的属性，也是非常常见的需求，比如天猫花呗的这个页面，这块内容就用到了sticky组件：
固定前，sticky元素的高度是：
固定后，sticky元素的高度是：
第二，在取消固定的时候，以sticky元素固定在顶部为例，上文提供的实现是在target元素跟浏览器顶部的距离小于stickyHeight的时候，就直接取消sticky元素的position: fixed属性，sticky元素立马被还原到普通文档流中，效果是：
它是在临界点的时候立马就消失的，而天猫花呗的那个效果就不是这样：
它在临界点的时候并不是立即消失，而是重新去调整sticky元素的top值，让它配合着滚动条一起跟随网页主体内容一起向上滚动：
从体验上来说，显然天猫花呗的这个效果更好一点，从功能上来说，上文提供的实现有一个致命的缺点：就是当sticky元素的高度非常大，超出了浏览器可视区域的高度的时候，会出现不管你怎么滚动，都无法浏览全sticky元素所有内容的BUG，有兴趣的可以拿上次实现的代码在自己博客的侧边栏上试一试。我试过发现了这个问题，所以才想要改进sticky组件：（
第三，上次的实现还有几处不足的地方：
1）documentElement.clientHeight没有做缓存，导致每次判断临界点时都要去重新获取：
2）滚动回调间隔的默认值太大，应该再设置小一点，这次用的是5，bootstrap用的是1，只有这样才能保证效果流畅；
3）有的场景可能不需要resize的时候重新设置sticky元素的宽度，应该加个选项来控制；
4）在sticky元素固定和取消固定的时候，应该提供回调函数，以便其它组件依赖这个组件的时候可以在关键点做些事情。
2. 如何改进
组件的选项重新定义了一下：