VUE实现锚点定位目录颜色提示

项目需求

因为本人是一个强迫症的完美主义者，再一次项目中无意中发现了一个特别炫酷的效果，如图：

GIF.gif

在滚动网页的时候右边的目录随着左边的描点提示，接下来咱们一起来看看这个效果的细节。

设计思想

如果想实现这个效果，首先咱们应该思考一下，这个效果需要什么？

第一：首先必须知道页面中每个标题到页面顶部的位置。（element.offsetTop）

第二：必须知道当前滚动条到页面顶部的位置。(window.scrollY)

代码注释

  methods: {
      //所有方法
    onscroll(Event) {
      //滚动事件
      let ws = window.scrollY; //当前滚动条位置

      if (ws > 160) {
        //控制悬浮
        this.float = true;
      } else {
        this.float = false;
      }
      /**当前滚动条的位置大于160则悬浮，小于等于160取消悬浮 */

      this.itemTab.forEach((item, index) => {//循环检测每个标题的位置
        if (ws>item-50) {//判断当前滚动条大于
          this.active = index;//将最后一个大于item的下标赋值给active
                              //active是当前滚动条对应的标题位置
        }
      });
      console.log('active:'+this.active);
      
    }
  },
  mounted() {
      //当页面中所有元素加载完成触发
    window.addEventListener("scroll", this.onscroll);
    //为浏览器添加“scroll”滚动条滚动事件
    for (let i = 0; i < this.list.length; i++) {
      //循环获取的list中标题的位置
      //补充：list中存放的是标题的id数组
      let ele = document.getElementById(this.pre + i + this.rea);
      this.itemTab.push(ele.offsetTop);
      //获取位置后添加到itemTab数组
    }
  }

看效果

GIF1.gif

实现的很完美。

最后

如果大家有什么问题可以在评论区留言。