需求:页面滚动到某一位置触发某个效果。
<div :class="activeBtn ? 'class-1': 'class-2'" @click="actBtn">
点击跳转
</div>
data () {
activeBtn : false
}
mounted: function () {
window.addEventListener('scroll', this.handleScroll, true); // 监听(绑定)滚轮滚动事件
},
methods: {
// 监听滚轮
handleScroll: function () {
// 取最外层的类名
let conEl = document.getElementsByClassName('content')[0]
if (conEl.scrollTop >= 600) {
this.activeBtn = true
}
if (conEl.scrollTop < 600) {
this.activeBtn = false
}
},
}