微信小程序--特定区域滚动到顶部时固定

项目要求：

如图所示，当页面滚动到导航条到达搜索栏下方时固定，向上滚动到导航条位置时又恢复原样。
以下是代码展示：
1.wxml

"width:100%;height: 100%;" scroll-y="true" bindscroll="scrollTopFun">"{{top>130 ? 'topnav' : ''}}"><--这里写大于130，表示距离顶部130rpx时固定，可根据需要修改-->...

2.wxss

.topnav{position: fixed;top: 85rpx;z-index:99;background: #fff;width: 100%;
}

3.js

data = {top:0
}
//控制回到顶部按钮的显示与消失
scrollTopFun(e){let that = this;that.top = e.detail.scrollTop;that.$apply();
}

其实整个思路很简单， 小程序自带的组件scroll-view自带有属性bindscroll（滚动时触发）。通过这个属性获取浏览器滚动条距离顶部的位置，通过这个位置判断class类的显示就可以了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！