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

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

position:sticky;

可是网上一搜，我大中国现状出来了，基本都是一个知识源，你们都是抄过来抄过去，可是标题写的一个比一个牛逼，可是没有一个解决的问题,仍是本身动手吧：ios

1、什么是sticky

总结来讲就是web

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、使用的条件

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

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

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

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.

3、小程序使用的坑

实现的时候由于个人菜单属于page的子元素，滚动时发现设置top值无效，设置bottom能够，一看代码，发现

page默认的有个hidden，
因此本身加一层view做为父view，完美解决。svg