vue吸顶效果实现

 主要通过监听页面的滚动距离判断距离是否大于吸顶元素的位置 进而添加一个类名使其吸顶

html

<div :class="headerFixed?'issFixed':''" ref="menu">需要吸顶的部分</div>

js

 mounted () {
    this.$nextTick(() => {
      // 获取吸顶元素的dom
      const menu = this.$refs.menu
      // 吸顶元素到top的距离
      this.offsetTop = menu.offsetTop
      // 元素自身的高度
      this.offsetHeight = menu.offsetHeight
      // 监听滚动条
      window.addEventListener('scroll', this.handleScroll)
    })
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
data () {
    return {
      offsetTop: 0,
      offsetHeight: 0,
      headerFixed: 0}
}
methods: {
    handleScroll () {
      // 获取页面滚动的距离 兼容写法
      const scrollTop = window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // 判断页面的滚动距离是否大于吸顶元素的位置
      this.headerFixed = scrollTop > this.offsetTop - this.offsetHeight
    }

    }
  }

css

.issFixed {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 4;
}