vuejs change item on scroll
<!-- If you don't use Tailwind, use css classes in <script></script> -->
<template>
<div v-bind:class="darkMode ? darkModeBodyClass : 'transition ease-out duration-700'">
<main>
<router-view :darkMode="darkMode">
</router-view>
</main>
</div>
</template>
<script>
export default {
data() {
return {
darkMode: false,
darkModeBodyClass: 'transition ease-out duration-700 bg-black text-white'
}
},
methods: {
switchToDarkMode() {
if (window.scrollY > 80) {
this.darkMode = true;
} else {
this.darkMode = false;
}
}
},
mounted() {
window.addEventListener('scroll', () => {
this.switchToDarkMode()
})
}
};
</script>