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


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

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

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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3