vue 吸顶

<template>
<div :class="searchFixed == true ? 'search-top top-fix' : 'search-top'">吸顶内容</div>
</template>
<script>
export default {
  data() {
    return {
     searchFixed: false,
    }
  },
  mounted() {
    // 事件监听滚动条
    window.addEventListener('scroll', this.watchScroll)
  },
  methods: {
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      //  当滚动超过 60 时，实现吸顶效果
      if (scrollTop > 60) {
        this.searchFixed = true
      } else {
        this.searchFixed = false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
 .search-top {
    width: 100%;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dcdfe6;
    background-color: #fff;
    z-index: 999;
  }
  .top-fix {
    position: fixed;
    top: 0;
  }

</style>