vue滚动屏幕使其菜单栏隐藏和显示
<template>
<div>
<div v-show="isShow">我是导航栏</div>
</div>
</template>
<script>
export default {
name: 'DetailHeader',
props :{
sightName:String
},
data () {
return {
isShow: true,
}
},
methods: {
isScroll() {
const top = document.documentElement.scrollTop
if (top > 100) { // 滚动条滚动距离超过100时
this.isShow = false
} else {
this.isShow = true
}
}
},
mounted () {
window.addEventListener('scroll', this.isScroll)
},
unmounted () {
window.removeEventListener('scroll', this.isScroll)
}
}
</script>