小编GLa*_*DOS的帖子

美好的一天，我对 vue.js 非常陌生，想要一个导航栏，默认情况下它是透明的，但在滚动时会改变其背景。不幸的是，它不起作用。我尝试了 fe 解决方案，但没有一个奏效。所以这个 JavaScript 代码是 Stack Overflow 的一个例子，它在 Fiddle 中工作。如果您需要更多信息和/或代码，请告诉我。

导航.vue

<template>
    <div id="navigation"> 
        <nav class="nav-items"> 
            <router-link class="item" to="/home">Home</router-link>
            <router-link class="item" to="/about">About</router-link>
            <router-link class="item" to="/japan">Japan</router-link>
        </nav> 
    </div>
</template>

<script>
export default {
    name: 'navigation'
}

import scroll from '../assets/js/scroll.js';

</script>

滚动.js

const navbar = document.querySelector('#navigation')

window.addEventListener('scroll', function(e) {
  const lastPosition = window.scrollY
  if (lastPosition > 50 ) {
    navbar.classList.add('colored')
  } else if (navbar.classList.contains('colored')) {
    navbar.classList.remove('colored')
  } else {
    navbar.classList.remove('colored')
  }
})

导航.scss

仅供参考：我在这里删除了不必要的代码。

#navigation {
    background: transparent;

    .colored …