vue指令 --- vue-observe-visibility

一个很方便的loader----vue-observe-visibility

应用场景一：

代替position: sticky, 这个属性简单来说 可以用来让元素在未超出屏幕高度时保持relative，超出屏幕高度时呈现position: fixed的效果。可以用于实现一些很常见的需求。 但是这个属性目前只有chrome支持的比较好，兼容性不是很好，所以需要替代方案-----vue-observe-visibility。完美解决。

具体看图，注意右边的form。

 

具体使用方法，就是在组件中引用并注册，如：

import { ObserveVisibility } from 'vue-observe-visibility'

directives: {

    'observe-visibility': ObserveVisibility

},

v-observe-visibility="{

    callback: visibilityChanged,

    intersection: {

    rootMargin: '-63px'

}

更详细的可以看文档 https://www.npmjs.com/package/vue-observe-visibility