A VueJs custom directive to stick an element where it is keeping it into view

v-scroll-fixed.directive.js

/**
 * Directive to stick an element where it is
 * when the scroll should pass him instead
 *
 * Just copy and paste this code inside your app
 * main script before Vue is initialized and you
 * have access to the directive as v-scroll-fixed
 *
 * @version 0.1.0
 * @author Filippo b4dnewz Conti
 *
 */
Vue.directive('scroll-fixed', (() => {
  let fn = null
	return {
		inserted(el, {value = {}}) {
      const offset = value.offset || 0
      const {offsetWidth} = el
      const {top} = el.getBoundingClientRect()
      fn = function() {
        if (window.scrollY >= top - offset) {
          el.style.position = 'fixed'
          el.style.top = `${offset}px`
          el.style.width = `${offsetWidth}px`
        } else {
          el.style.position = 'initial'
          el.style.top = 'initial'
          el.style.width = 'initial'
        }
      }
      window.addEventListener('scroll', fn)
    },
		unbind() {
			window.removeEventListener('scroll', fn)
		}
	}
})())