H5吸顶功能--划到某一元素处将其固定在顶部

作者: 图恩分类: 编程开发阅读: 717发布时间： 2020-06-20 20:08:14

在网页里经常遇到这样的情况，滑动页面至某一个元素处，元素一直固定在顶部或底部，当页面滑到元素原有位置上方时，元素恢复原有位置。例如京东秒杀的活动时间，还有常见的搜索输入框固定在顶部。利用js写了个搜索输入框固定在上方的例子，效果示例如下：主要用到了offsetTop与scrollTop。 offsetTop:元素到其上级层顶部的距离. scrollTop:网页被卷去的高当网页滚动条卷起来的高度大于需要固定定位元素距离顶部的高时，就可以设置固定定位样式了。代码如下：