h5吸顶
ios和安卓会有兼容问题可根据平台两种方法同时使用
第一种 使用css 粘性定位 position: sticky; 属性实现
效果示例
1.正常文档流位置
2.向上滑动后位置
3.吸顶之后内容滑动
<div className={styles.main}>
<div className={styles.top}> </div>
<div className={styles.divBlock}>
<span className={styles.left}> </span>
<span className={styles.right}>
<div className={styles.content}> 内容1</div>
<div className={styles.content}> 内容2</div>
<div className={styles.content}> 内容3</div>
<div className={styles.content}> 内容4</div>
<div className={styles.content}> 内容5</div>
</span>
</div>
</div>
css代码
.main{
height: 1984px;
width: '100%';
position :relative;
.top{
height: 200px //吸顶滑动的高度
}
.divBlock{
position: sticky;
top:0;
width: 100%;
.left{
display: inline-block;
width: 30%;
height: 500px;
background: #d21617;
}
.right{
display: inline-block;
width:70%;
height: 500px;
background: #09d3ac;
overflow: auto;
.conent{
width:70%;
height: 200px;
}
}
}
}
position:sticky; 在屏幕范围内 不受 left ,top 影响 ,当到元素接近偏移区域是 会 变成 fixed,
会自动固定在 top ,left 等 实现粘性吸顶
参考[https://developer.mozilla.org/zh-CN/docs/Web/CSS/position]
第二种 使用 滚动条滑动事件实现(react中使用)
使用js 事件监听滚动条滑动的距离 手动设置 子元素position:fixed
addListen = () => {
let top= document.documentElement.scrollTop;
if(top>170){
document.getElementById('scrollDiv').style.position='fixed';
document.getElementById('scrollDiv').style.top= 0
}else{
document.getElementById('scrollDiv').style.position='relative';
}
}
render () {
window.onscroll=this.addListen
return(
<div className={styles.main}>
<div className={styles.top}> </div>
<div className={styles.divBlock} id='scrollDiv'>
<span className={styles.left}> </span>
<span className={styles.right}>
<div className={styles.content}> 内容1</div>
<div className={styles.content}> 内容2</div>
<div className={styles.content}> 内容3</div>
<div className={styles.content}> 内容4</div>
<div className={styles.content}> 内容5</div>
</span>
</div>
</div>
)
}
css代码
.main{
height: 1984px;
width: '100%';
.top{
height: 200px
}
.divBlock{
width: 100%;
.left{
display: inline-block;
width: 30%;
height: 500px;
background: #d21617;
}
.right{
display: inline-block;
width:70%;
height: 500px;
background: #09d3ac;
overflow: auto;
.conent{
width:70%;
height: 200px;
}
}
}
}