vue实现吸顶

实现效果

image.png

代码：

定义参数:
 animateSpeed: 40, //平滑滚动的速度
      isFixed: false, //导航栏是否吸顶
      anchorTop: 0, //导航栏的offsetTop
      anchorHeight: 0, //导航栏的高度
      activeIndex: 0 //导航栏高亮的索引

初始化：
this.$nextTick(() => {
      this.anchorTop = this.$el.querySelector('#ceilEle').offsetTop
      this.anchorHeight = this.$el.querySelector('#ceilEle').offsetHeight
      window.addEventListener('scroll', this.winScrollHandler) //滚动事件监听
    })
// $el只能在mounted中使用
 /**
     * 窗口的滚动监听
     */
    winScrollHandler() {
      //是否fixed
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      if (this.anchorTop <= scrollTop) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }

      //高亮
      let anchorContentList = document.querySelectorAll('.anchorContent')
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight
    },
    /**
     * 锚定位
     */
    goAnchor(selector, index, name) {
      let anchor = this.$el.querySelector(`#${selector}`)
      let targetTop = anchor.offsetTop
      let distance =
        document.documentElement.scrollTop || document.body.scrollTop
      let rate = Math.abs(targetTop - distance) / this.animateSpeed
      if (targetTop > distance) {
        // 目标元素的top大于现有的top，向下滚动
        this.smoothDown(rate, distance, targetTop, index)
      } else if (targetTop < distance) {
        //目标元素的top小于现有的top，向上滚动
        this.smoothUp(rate, distance, targetTop, index)
      }
    },
    /**
     * 向下滚动
     */
    smoothDown(rate, distance, targetTop, index) {
      let inter = setInterval(() => {
        if (distance < targetTop) {
          distance += rate
          document.documentElement.scrollTop = distance - this.anchorHeight
          document.body.scrollTop = distance - this.anchorHeight
        } else {
          document.documentElement.scrollTop = targetTop - this.anchorHeight
          document.body.scrollTop = targetTop - this.anchorHeight
          clearInterval(inter)
          this.activeIndex = index
        }
      }, 10)
    },
    /**
     * 向上滚动
     */
    smoothUp(rate, distance, targetTop, index) {
      rate *= 1.3
      let inter = setInterval(() => {
        if (distance > targetTop) {
          distance -= rate
          document.documentElement.scrollTop = distance - this.anchorHeight
          document.body.scrollTop = distance - this.anchorHeight
        } else {
          document.documentElement.scrollTop = targetTop - this.anchorHeight
          document.body.scrollTop = targetTop - this.anchorHeight
          clearInterval(inter)
          this.activeIndex = index
        }
      }, 10)
    }


 <div>
    <div id="ceilEle" class="ceil" :class="{ 'fixed animated slow fadeIn': isFixed }">
      <div class="header-wrapper frs">
        <a-menu mode="horizontal" class="header-menu">
          <a-menu-item
            :class="$route.path===routeItem.path?'ant-menu-item-selected' :''"
            v-for="(routeItem,index) in routeList"
            :key="index"
            @click="routeToPage(routeItem.path)"
          >{{routeItem.title}}</a-menu-item>
        </a-menu>
        <a-input-search @search="searInput" class="search-input" placeholder="请输入歌曲名或歌手搜索"></a-input-search>
      </div>
    </div>
  </div>