<template>
<div id="app" ref="Content" @mousewheel="scrool">
<div id="nav" class="nav" :class="{ 'fixed-nav': Fixed }" />
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
</div>
</template>
<script>
export default {
data() {
return {
Fixed: false
}
},
mounted() {
// 事件监听滚动条
this.$refs.Content.addEventListener('scroll', this.scrool)
},
destroyed() {
// 移除事件监听
this.$refs.Content.removeEventListener('scroll', this.scrool)
},
methods: {
scrool() {
// 滚动的距离
const scrolled = this.$refs.Content.scrollTop
// 容器的高度
var offsetTop = document.querySelector('#nav').offsetHeight
console.log('scrollTop=>', scrolled, ' offsetTop=>', offsetTop)
// 滚动的距离如果大于元素到顶部的距离时,实现吸顶效果
if (scrolled > offsetTop) {
this.Fixed = true
} else {
this.Fixed = false
}
}
}
}
</script>
<style scoped>
body {
margin: 0;
}
/* 背景 */
#app {
height: 85vh;
overflow-y: scroll;
margin: 0 auto;
background-color: pink;
}
/* 导航 */
.nav {
width: 100%;
height: 30px;
background-color: skyblue;
}
/* 固定导航 */
.fixed-nav {
position: fixed;
top: 200;
z-index: 999;
}
</style>
记录一下Vue在div中监听滚动事件并实现吸顶效果
最新推荐文章于 2023-04-14 16:42:13 发布