vue插件实现吸顶功能

html:

<div v-sticky="{ stickyTop: 0, disabled: false }" class="stickTop">
  <div>content</div>
</div>

script:
import VueSticky from “vue-sticky”;

directives: {
sticky: VueSticky
},
mounted() {
// handleScroll 为页面滚动的监听回调
window.addEventListener(“scroll”, this.handleScroll);
let supportCSSSticky =
document.querySelector(".stickTop").style.position === “sticky”;
if (!supportCSSSticky) {
// 不支持的情况下监听滚动
}
},
beforeDestroy() {
removeEventListener(“scroll”, this.handleScroll);
}
css:
/* 1.父元素不能设置 overflow:hidden 或者 overflow:auto 属性
2.至少指定 top 、bottom 、left 、right 4 个值中的一个，否则只会处于相对定位
3.父元素的高度不能低于 sticky 元素的高度
4.sticky 元素仅在其父元素内生效
*/