缘起
小程序需要在手机狭小的屏幕中放入尽量多的内容，而老板想在在页面放个广告条，由于挤占了不然就不大的页面控件，对程序的功能操作又有较大的影响。如何兼顾两者的需求？
下面介绍一种默认显示页面首部广告条，但在用户上滚页面时隐藏广告条，而工具栏保持不动的方法。
方法
实现方法就是使用CSS的定位样式实现，默认使用相对定位relavtive方式，在页面上滚到隐藏广告条时，搜索框切换为使用固定定位fixed方式。
首先在页面视图WXML中添加广告条和搜索框组件，如下图所示，搜索框组件的position样式使用变量绑定。
在页面注册文件中绑定页面滚动触发事件的处理函数onPageScroll，如下图所示，在页面滚动位置超过广告条高度(100px)时，就切换定位方式。
结论
以上，就完成了小程序页面滚动实现广告条隐藏，此种方式的缺点是用户在滚动比较快时，工具栏的固定显示有迟滞现象。
更多实战干货，可查看：
更多常见错误，可查看：
解决 Page[pages/XXX/XXX] not found错误
关注晓程序干货店，分享小程序开发干货知识
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
