滑动到顶部固定

思路:通过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;
}
发布了266 篇原创文章 · 获赞 5 · 访问量 9892

猜你喜欢

转载自blog.csdn.net/qq_32603969/article/details/104328426