A minimal implementation of a fixed header on scroll with a translucent bg.

stick-it.vue

<template>
<header>
  <h1>Brand</h1>
</header>
</template>

<script>
  ;(() => {
    const header = document.querySelector('header');
    const stick = header.offsetTop;
    window.onscroll = () => {
      if (window.pageYOffset > stick) {
        console.log('add')
        header.classList.add('fix');
      } else {
        console.log('rm')
        header.classList.remove('fix');
      }
    };
  })();
 </script>
 
 <style>
  header {
    background: transparent;
    transition: background 0.8s;
  }
  .fix {
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }
 </style>