使用getBoundingClientRect方法实现简洁的sticky组件的方法

内容摘要
sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作。本文介绍这种组件的
文章正文

sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作。本文介绍这种组件的实现思路,并提供一个同时支持将sticky元素固定在顶部或底部的具体实现,由于这种组件在网站中非常常见,所以有必要掌握它的实现方式,以便在有需要的时候基于它的思路写出功能更多的组件出来。

固定在顶部的demo效果(对应sticky-top.html):

sticky组件的改进实现》了解更佳的实现。


代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!