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
原文：https://www.cnblogs.com/daisygogogo/p/10260284.html