记录一下Vue在div中监听滚动事件并实现吸顶效果

<template>
  <div id="app" ref="Content" @mousewheel="scrool">
    <div id="nav" class="nav" :class="{ 'fixed-nav': Fixed }" />
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>
    <p>哈哈哈</p>

  </div>
</template>

<script>
export default {
  data() {
    return {
      Fixed: false
    }
  },

  mounted() {
    // 事件监听滚动条
    this.$refs.Content.addEventListener('scroll', this.scrool)
  },

  destroyed() {
    // 移除事件监听
    this.$refs.Content.removeEventListener('scroll', this.scrool)
  },

  methods: {

    scrool() {
      // 滚动的距离
      const scrolled = this.$refs.Content.scrollTop
      // 容器的高度
      var offsetTop = document.querySelector('#nav').offsetHeight
      console.log('scrollTop=>', scrolled, '  offsetTop=>', offsetTop)
      //  滚动的距离如果大于元素到顶部的距离时，实现吸顶效果
      if (scrolled > offsetTop) {
        this.Fixed = true
      } else {
        this.Fixed = false
      }
    }
  }
}
</script>

<style scoped>
body {
  margin: 0;
}

/* 背景 */
#app {
  height: 85vh;
  overflow-y: scroll;
  margin: 0 auto;
  background-color: pink;
}

/* 导航 */
.nav {
  width: 100%;
  height: 30px;
  background-color: skyblue;
}

/* 固定导航 */
.fixed-nav {
  position: fixed;
  top: 200;
  z-index: 999;
}
</style>

参考链接 ：vue 监听某div滚动条的滚动事件_付月半子的博客-CSDN博客_vue监听div滚动条

                   Vue实现导航栏吸顶效果_彭世瑜的博客-CSDN博客_vue悬浮吸顶导航