H5页面吸顶效果实现(两种实现方式！！)

首先看一下效果

总共可以有两种方式实现

第一种 使用css 粘性定位 position: sticky;  属性实现

 首先给需要吸顶效果的子元素 设置  position: sticky; top:0;  给父元素 添加 position :relative; 

 position:sticky;  在屏幕范围内 不受 left ，top 影响 ，当到元素接近偏移区域是 会 变成 fixed， 会自动固定在 top ，left 等 实现粘性吸顶！它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

  position: -webkit-sticky;//safari 里这样写

 

目前兼容 

 

第二种 使用 滚动条滑动事件 onscroll   实现

  这种方式 使用js 事件监听滚动条滑动的距离 手动设置 子元素position:fixed 实现。

 使用 document.body.scrollTop; 得到滚动条距离顶部的高， 判断超过偏移区域是 手动加入position:fixed ；top:0px ; zindex:2

目前兼容 Chrome,Firefox,Opera, , 不兼容 IE，Safari 。

 

这期就写到这里 。有什么问题大家可以留言 指出。