微信小程序实现粘性布局sticky——注意事项

最近小程序要实现一个商城页面的切换菜单，处在页面的中间，滚动到最上面时，能够悬浮在顶部，最开始的解决方案是，外层使用scroll-view，监听滚动事件，当滚动到顶部时，菜单fixes布局，这样可以实现，但是一直监听的消耗内存和资源是问题，同时还会不流畅，出现卡顿，正好发现这个神器

position:sticky;

但是网上一搜，我大中国现状出来了，基本都是一个知识源，大家都是抄过来抄过去，但是标题写的一个比一个牛逼，但是没有一个解决的问题,还是自己动手吧：

一、什么是sticky

总结来说就是

Keeps elements positioned as "fixed" or "relative" 
depending on how it appears in the viewport. 
As a result the element is "stuck" when necessary while scrolling.

意思就是这个布局可以根据它的位置来切换的它的表现，就好像布局为relative或者fixed一样，使它在滚动的时候像一个便利贴一样黏在窗口的某个位置，很神奇吧

二、使用的条件

这样强大的功能还处于尝鲜阶段，使用起来不但浏览器很多不支持，切要求较多，

2.1 浏览器的支持情况（来自CAN I USE）

就上图来看，ios可以没问题，安卓堪忧，但是可以说，主流的基本支持

2.2 使用的条件

1. 父布局不能设置overflow：hidden，类比的同样不能设置overflow-x或者-y，即使不是在滚动方向上隐藏也会导致失败
2. 需要设置sticky元素的left，right，top，bottom任一值，但是必须要有一个

For stickily positioned elements, left, right, top and bottom 
are offsets from the respective edges of its flow box which
 are used to constrain the element’s offset. Percentage 
 values of left and right refer to the width of its flow box; 
 percentage values of top and bottom refer to the height of its flow box.

三、小程序使用的坑

实现的时候因为我的菜单属于page的子元素，滚动时发现设置top值无效，设置bottom可以，一看代码，发现

page默认的有个hidden，
所以自己加一层view作为父view，完美解决。