使用getBoundingClientRect方法实现简洁的sticky组件的方法
47 浏览量
2020-09-02
15:07:41
上传
评论
收藏 411KB PDF 举报
使用使用getBoundingClientRect方法实现简洁的方法实现简洁的sticky组件的方组件的方
法法
本文介绍这种组件的实现思路，并提供一个同时支持将sticky元素固定在顶部或底部的具体实现，由于这种组件
在网站中非常常见，所以有必要掌握它的实现方式，以便在有需要的时候基于它的思路写出功能更多的组件出
来
sticky组件，通常应用于导航条或者工具栏，当网页在某一区域滚动的时候，将导航条或工具栏这类元素固定在页面顶部或底
部，方便用户快速进行这类元素提供的操作。本文介绍这种组件的实现思路，并提供一个同时支持将sticky元素固定在顶部或
底部的具体实现，由于这种组件在网站中非常常见，所以有必要掌握它的实现方式，以便在有需要的时候基于它的思路写出功
能更多的组件出来。
固定在顶部的demo效果（对应sticky-top.html）：
固定在底部的demo效果（对应sticky-bottom.html）：
评论0
最新资源