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

在网页里经常遇到这样的情况,滑动页面至某一个元素处,元素一直固定在顶部或底部,当页面滑到元素原有位置上方时,元素恢复原有位置。例如京东秒杀的活动时间,还有常见的搜索输入框固定在顶部。

H5吸顶功能--划到某一元素处将其固定在顶部_第1张图片

利用js写了个搜索输入框固定在上方的例子,效果示例如下:
H5吸顶功能--划到某一元素处将其固定在顶部_第2张图片

主要用到了offsetTop与scrollTop。
offsetTop:元素到其上级层顶部的距离.
scrollTop:网页被卷去的高

当网页滚动条卷起来的高度大于需要固定定位元素距离顶部的高时,就可以设置固定定位样式了。
代码如下:




    
    
    


  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表

原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe

你可能感兴趣的:(H5吸顶功能--划到某一元素处将其固定在顶部)