H5吸顶效果实现

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;
   				  }
   		  }
     }
}