记录Vue中将固定元素滚动一定高度后填充背景色

实现将置于顶部的头导航栏的透明色，经过鼠标下滚后，加上背景色

图一：

图二：

如这两张图的效果，将图一变为图二，同时也可将图二变为图一。
首先，该元素是固定元素，将它固定在浏览器顶部，然后加一个ref来获取该元素

<nav ref="viewBox"></nav>

这里是js方法监听滚轮并且将背景色改变

mounted(){
    
    
    //监听滚轮滚动事件
    window.document.body.onscroll = () => {
    
    
      if (document.documentElement.scrollTop > 0) {
    
    
        this.$refs.viewBox.style.background = "#0554CB";
      } else {
    
    
        this.$refs.viewBox.style.background = "transparent";
      }
    };
}