vue实现元素滑动到顶部固定效果的复用组件

此例子为可直接复用组件

模板

<template>
  <div ref="menu">
    <div class="menu" :class="{'is_top' : isTop}">xxx</div>
    <div :class="{'placeholder' : placeholder}"></div>
  </div>
</template>

解释：

    <div class="menu" :class="{'is_top' : isTop}">xxx</div>

此行代码为导航本体

    <div :class="{'placeholder' : placeholder}"></div>

此行代码为占位元素，用于在固定在顶部后不会因为缺失一个元素导致页面突然跳动

js代码

    topMenu() {
   
      var menu = this.$refs.menu;
      window.addEventListener("scroll", (