移动端吸顶效果(小程序，h5)

小灰灰 2022-12-21 14:53 305阅读 0赞

## 移动端吸顶效果(小程序，h5) ##

### **前言：** ###

移动端h5开发页面很多吸顶的需求，滚动到指定范围~要实现特殊内容区域置顶吸顶的效果；

### **使用条件：** ###

*1、父元素不能overflow:hidden或者overflow:auto属性。*

*2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位*

*3、父元素的高度不能低于sticky元素的高度，*给父元素 添加** ***position :relative;*

*4、sticky元素仅在其父元素内生效，*它之所以会出现，也是因为监听**scroll**事件来实现粘性布局使浏览器进入慢滚动的模式

### **核心代码：** ###

#stricky{
    	position: sticky;
    	position: -webkit-sticky;
    	top: 0;
    }

**案例源码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>stricky粘性粘贴</title>
    		<style type="text/css">
    			html,body{
    				height: 100%;
    				width: 100%;
    				padding: 0;
    				margin: 0;
    				border: none;
    			}
    			#box{
    				height: 100%;
    				width: 100%;
    				overflow: auto;
    				position: relative;
    			}
    			#box p,#stricky{
    				text-align: center;
    				height: 30px;
    				line-height: 30px;
    				border-bottom: 1px solid lightgray;
    				font-size: 14px;
    				
    			}
    			
    			#stricky{
    				background: greenyellow;
    				height: 60px;
    				line-height: 60px;
    				font-weight: bold;
    				color: aliceblue;
    				position: sticky;
    				position: -webkit-sticky;
    				top: 0;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box"></div>
    		<script type="text/javascript">
    			window.onload=function(){
    				var html="";
    				Array.from({length:60},function(i,v){
    					html+='<p>'+(v+1)+'条,吸顶测试数据</p>'
    				});
    				html+='<div id="stricky">我要吸顶了</div>';
    				Array.from({length:40},function(i,v){
    					html+='<p>'+(v+1+60)+'条,吸顶测试数据</p>'
    				});
    				document.getElementById('box').innerHTML=html;
    			};
    		</script>
    		
    	</body>
    </html>

**另一种： **

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

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

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

源码如下：

效果如下：

![20201116183602618.gif][]

## ##

### **小程序实现方案：** ###

小程序对***position:stricky***无效

### **吸顶效果的实现思路：** ###

1.获取菜单栏距离文档顶部的距离，也就是头部区域的高度headHeight，使用小程序的api，可以获得指定节点的高度

2. 监听页面滚动距离***scrollTop***，小程序api, ***onPageScroll***，监听页面滚动

3.当***scrollTop > headHeight***的时候，添加吸顶样式的class，实现吸顶效果

这样写之后，测试了一下，吸顶的时候抖动会比较严重

### **优化方案** ###

1. 菜单栏初始定位为相对menu-wrapper 绝对定位，这样，可以给内容区增加padding-top，padding-top值为菜单栏的高度

2. 内容区用***scroll-view***包裹，未吸顶之前，***禁用当前scroll-view的滚动***，吸顶之后，才启用滚动

加了两个优化方案之后，吸顶效果抖动没这么厉害，***ios***还是会有点点，***android***就很平滑了。

案例demo:[https://github.com/daisygogogo/my-demo/blob/master/index.vue][https_github.com_daisygogogo_my-demo_blob_master_index.vue]

**需要注意的是，使用小程序的api获取头部的高度时，头部的高度需要明确指定了高度，否则获取到的高度可能不准。**

[20201116183602618.gif]: /images/20221120/4cd71448d58c4282ba091d6b8dfba493.png
[https_github.com_daisygogogo_my-demo_blob_master_index.vue]: https://github.com/daisygogogo/my-demo/blob/master/index.vue