sticky组件的改进实现

上上篇博客介绍了一个sticky组件的简洁实现，经过这两天的思考，发现上次提供的实现还有较多不足的地方，另外跟别的网站上实现的效果在取消固定的时候也有一些不同，上次提供的取消固定的处理方式不好，本文在上文的基础上，提供一个改进版的sticky组件，功能更加完善，希望您有兴趣阅读。代码演示见本博客滚动时侧边栏的效果。

代码下载

1. 旧版本的问题

上一个sticky组件的实现中，有多个问题存在：

第一，从sticky的效果上来说，sticky元素在固定前后，不会变化的是相对浏览器左边的位置以及sticky元素的整体宽度，可能会变化的是相对浏览器顶部或底部的位置和sticky元素的高度，而上文提供的实现中把后面两个会变化的值都当成了不变的值。为什么在固定的时候top值或bottom值就一定是0？当然可以不是0阿，比如top: 20px，bottom: 15px，在某些场景里，加上一些这样的偏移，sticky的效果会更好看，比如bootstrap官方文档中用到的affix组件实例（这个组件的功能跟本文实现的sticky组件是差不多的）：

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：sticky组件的改进实现

关键词：