Vue 自定义指令实现 元素 吸顶功能

问题描述：页面需要实现吸顶效果

解决办法： 

（1）自定义组件内指令

directives: {
    stickyed: {
      inserted(el, binding) {
        el.style.position = 'sticky'   //position 的 属性  非常好用
        console.log(binding, '0000')
        function aaa() {
          const scroll_top = document.documentElement.scrollTop
          const offset_top = el.offsetTop
          console.log(scroll_top, '滚动条滚动得距离')
          console.log(offset_top, '元素距离顶部得距离')
          if (offset_top - scroll_top < 0) {
            el.style.top = binding.value.top + 'px'
          }
        }
        window.addEventListener('scroll', aaa, false)  //实施滚动条监听
      }
    }
  },
自定义指令实施：
<div v-stickyed="{top:0}" style="width:1000px;height:40px;background:red;margin-left:200px;z-index:1001"></div>

　　（2）vue 注册全局指令

import Vue from 'vue'
Vue.directive('stickyed', {
  inserted(el, binding) {
    el.style.position = 'sticky'
    console.log(binding, '0000')
    function aaa() {
      const scroll_top = document.documentElement.scrollTop
      const offset_top = el.offsetTop
      console.log(scroll_top, '滚动条滚动得距离000')
      console.log(offset_top, '元素距离顶部得距离000')
      if (offset_top - scroll_top < 0) {
        el.style.top = binding.value.top + 'px'
      }
    }
    window.addEventListener('scroll', aaa, false)
  }
})

main.js 里引用改文件
import '@/utils/aaa.js'

　　（3）vue引用插件  VueSticky  

下载 插件
npm i VueSticky

在文件中引入
import Vue from 'vue'
import VueSticky from 'vue-sticky'
Vue.directive('sticky', VueSticky)

main.js 中引入