<template>
//为顶部导航声明id
<view id="navTop" :class=" {'navgation': isTop == 0 ,'navgationTop':isTop == 1} ">
我是顶部导航
</view>
</template>
<script>
export default {
data() {
return {
myScroll:"",
isTop: 0 ,
}
},
//在mounted中获取导航距离顶部的距离
mounted() {
const query = uni.createSelectorQuery().in(this);
this.clearTimeSet = setTimeout(() => {
query.select('#navTop').boundingClientRect(data => {
this.myScroll = data.top
}).exec();
}, 350);
},
//获取滚动条距离顶部的距离
onPageScroll: function(e) {
//导航滚动到顶部执行
if (e.scrollTop > this.myScroll) {
this.isTop = 1
} else {
this.isTop = 0
}
},
}
</script>
<style>
.navgationTop {
width: 750rpx;
height: 158rpx;
position: fixed;
top: 0;
z-index: 9;
height: 158rpx;
}
.navgation {
width: 750rpx;
height: 158rpx;
padding-top: 21rpx;
</style>