Skip to content

Instantly share code, notes, and snippets.

@noeleo25
Last active Aug 12, 2020
Embed
What would you like to do?
Custom directive: sticky header after scroll
<template>
<!-- using custom directive v-sticky -->
<div class="w-100" v-sticky:top="{minWidth: 768, offset: 'vh'}">
</template>
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);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment