Vue2.x自定义指令实现header吸顶效果

       在有些场景中，我们需要实现一个header在向下滑动到一定距离时自动出现，否则隐藏，我们可以使用Vue2.x的自定义指令来实现。

       实现方法就是，在自定义指令中给window监听一个scroll事件，判断滚动的位置，设置组件的隐藏显示。

源代码：

Vue.directive('isAppearHeader', {
  inserted (el, binding) {
    el.style.display = 'none'

    // 这里binding参数就是组件上自定义指令传过来的参数
    window.addEventListener('scroll', () => {
      if ((document.documentElement.scrollTop || document.body.scrollTop) > binding.value) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    })
  },

  // 销毁指令，避免事件污染
  unbind () {
    window.onscroll = null
  }
})

在组件上使用自定义指令：

效果：