小程序 滑动菜单栏吸顶效果 抖动优化

 

1. 先来看一下未滑动的效果，（样式随便写的，但愿尽可能简单）

 

 

 

2.滑动到菜单栏以后的吸顶效果

 

 

 

 3. 个人html布局，小程序我用的是mpvue写的，使用了scss，能够自行下载demo后改成原生小程序标签

 

 

吸顶效果的实现思路：

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

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

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

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

 

优化方案

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

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

加了两个优化方案以后，吸顶效果抖动没这么厉害，ios仍是会有点点，安卓就很平滑了。

 

须要注意的是，使用小程序的api获取头部的高度时，头部的高度须要明确指定了高度，不然获取到的高度可能不许。

 

完整代码，请上github查看，有注释，推荐点击连接看30秒，哈哈~，https://github.com/daisygogogo/my-demo/blob/master/index.vue