Record the background color after scrolling the fixed element to a certain height in Vue

Realize the transparent color of the header navigation bar that will be placed at the top, and add the background color after the mouse scrolls down

Picture 1:

Picture 2:

As the effect of these two pictures, change picture 1 into picture 2, and change picture 2 into picture 1 at the same time.
First, the element is a fixed element, fix it at the top of the browser, and then add a ref to get the element

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

Here is the js method to listen to the scroll wheel and change the background color

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