思路:通过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;
}