小程序菜单滚动固顶php中文网,微信小程序--特定区域滚动到顶部时固定的方法...

项目要求：

如图所示，当页面滚动到导航条到达搜索栏下方时固定，向上滚动到导航条位置时又恢复原样。

以下是代码展示：

1.wxml

...

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类的显示就可以了。

以上所述是小编给大家介绍的微信小程序--特定区域滚动到顶部时固定的方法详解整合，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！