想要实现特定区域滚动到顶部时固定，请问有什么比较好的实现方式？？ - WXOPEN Club

想要在小程序中实现：页面中的特定区域滚动到顶部时悬停(就是美团小程序首页的综合排序，销量那里的效果，下图所示)

我试着用scroll-view提供的bindscroll方法获取滚动的距离，根据滚动的距离改变元素的样式，在模拟器上还挺顺畅，在真机(安卓机 oppor9s)上

着实是卡顿，请问有什么好的解决办法么？

或者有什么好的方法可以实现这样的效果么~(￣▽￣)~*

不用scroll-view。onPageScroll 监听页面滚动，拿到e.scrollTop滚动的距离，大于某个值的时候，让这块固定在顶部

自己写个滑动的比组件好用

scroll-view这个组件的性能很差，最好不要在页面级别的滚动上去使用scroll-view，直接用page自身的滚动就好了，我们的小程序在开发的过程中发现很多这个组件的性能问题，现在只在局部滚动，滚动的内容很少的情况下会用scroll-view

kyu 4楼•5 年前

一楼正解。我们小程序很多地方都做了这个效果。开发者工具卡。手机上IOS很流畅，安卓卡一点点点点。

我没用scrollview 直接在page一级监听滚动，通过class控制咯

可以看看这个iview-weapp 的sticky组件的实现

scroll-view的bindscroll事件，配合API的createSelectorQuery()，比较滚动高度大于要fixed的元素以上区域高度，修改样式。效果还可以，没那么卡顿

美团的也会卡顿一下吧

page 的滚动好像就不会一卡一卡的了

css：sticky（ios可用，android部分可用。美团应该也是用这个属性的）

没必要为了这个效果做这么多的计算，小程序会卡卡的，而且安卓也达不到想要的效果。

跟产品商量一下，看能不能用这个属性。