微信小程序滑动页面到指定位置时，固定指定元素在顶部

2018/12/20 20:03
这个需求其实很常见，首先我想到的是利用，微信小程序自带的scroll-view标签来实现，但经过几次实验均发现达不到预期效果。最后查找博客得知可以利用页面Page自带的页面滚动监听事件onPageScroll来实现，试了以下果然成功了，稍后效果图出来了再放上来，这里先记录一下。

  onPageScroll:function(e){
    console.log(e)
  },

---

放效果图，今天才想起来哈哈

---

2019/2/27 补充
思路：通过onPageScroll事件动态的改变scrollTop的值来判断是否大于顶部170（视情况而定），大于就把该模块设为固定topnavFixed样式否则用topnavAbsolute相对定位。

<view class="{{scrollTop>170 ? 'topnavFixed' : 'topnavAbsolute'}}" ></view>

onPageScroll: function (e) {//监听页面滚动
  this.setData({
    scrollTop: e.scrollTop
  })
},

.topnavFixed{
border-top-left-radius:20rpx;
border-top-right-radius:20rpx;
position:fixed;width:100%;height:100rpx; top:0rpx;background:white;z-index: 1;
}
.topnavAbsolute{
border-top-left-radius:20rpx;
border-top-right-radius:20rpx;
position:absolute;width:100%;height:100rpx; top:340rpx;background:white;z-index: 1;
}