vue中根据页面滑动的位置显示元素
<template><div id="goto-top" :class="{show:searchBarFixed}" @click="gotop"></div></template><script>
·
<template>
<div id="goto-top" :class="{show:searchBarFixed}" @click="gotop"></div>
</template>
<script>
export default {
data(){
return{
searchBarFixed:'',
}
},
mounted () {
console.log($)
window.addEventListener('scroll',this.handleScroll)
},
methods:{
handleScroll(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var offsetTop = document.querySelector('#goto-top').offsetTop
if (scrollTop > offsetTop) {
this.searchBarFixed = true
} else {
this.searchBarFixed = false
}
},
gotop() {
$('html, body').animate({
'scrollTop': 0
}, 'fast');
}
}
}
</script>
这里我引入了jquery,也可以不用
更多推荐
已为社区贡献6条内容
所有评论(0)