使用Vuejs滚动事件时,如何更改导航栏的背景颜色。我通过使用此答案尝试了V滚动事件How to change css while scrolling in Vue这是代码,但是不起作用?
<nav v-scroll="handleScroll">
<div class="logo">
<img src="../assets/images/logo.png" alt="logo" />
<button id="mobBtn" @click="displayList">
<i class="fas fa-bars"></i>
</button>
</div>
<ul class="navlist" id="mobList">
<li>
<a href>Home</a>
</li>
<li>
<a href>About</a>
</li>
<li>
<a href>Blog</a>
</li>
<li>
<a href>Contact</a>
</li>
</ul>
</nav>
<script>
export default {
name: "Header",
data: {},
methods: {
handleScroll: function (evt, el) {
alert("Dddd")
if (window.scrollY > 50) {
el.setAttribute(
'style',
'background-color: red;'
)
}
return window.scrollY > 100
}
};
</script>
将事件侦听器添加到窗口,并在滚动事件开始时将新数据分配给数据模型并更新其值。参见下面的代码
日期模型
data: {
scrollPosition: null
},
方法
methods: {
updateScroll() {
this.scrollPosition = window.scrollY
}
}
已安装的挂钩
mounted() {
window.addEventListener('scroll', this.updateScroll);
}
现在就您的情况,将其放在导航栏中
<nav :class="{change_color: scrollPosition > 50}">
...
...
</nav>
并将CSS放入您的change_color类中
<style scoped>
.change_color {
background-color:red
}
</style