Custom directive: sticky header after scroll

Home.vue

<template>
  <!-- using custom directive v-sticky -->
  <div class="w-100" v-sticky:top="{minWidth: 768, offset: 'vh'}">
</template>

main.js

Vue.directive('sticky',{
  bind: function (el, binding) {
    el.scrollEvent = function() {
      var offset = binding.value.offset;
      if(offset == 'vh')
        offset = window.innerHeight;
      if( window.innerWidth >= binding.value.minWidth){
        if(binding.arg == 'top' && window.scrollY >= offset){
          el.style.position = 'fixed';
          el.classList.add("el-fixed");
        }
        else{
          el.style.position = 'relative';
          el.classList.remove("el-fixed");
        }
      }
    }
    document.addEventListener('scroll', el.scrollEvent);
  }
});