Vue实现手写导航栏绑定内容锚点和滚动内容导航栏变化

本文章用到 jquery 来进行操作

实现效果

html内容

     <div class="right">
        <h4>流程说明</h4>
        <div class="right_guDing">
          <div class="right_guDing_div">
            <p
              class="right_guDing_p"
              :class="activeStep == item.hrefName ? 'active' : ''"
              v-for="(item, index) in tabs"
              :key="index"
              :id="item.hrefName"
              @click="anchorSelect(item.hrefName)"
            >
              {{ item.name }}
            </p>
          </div>
        </div>
      </div>

js内容

别忘记下载引入jquery

import $ from "jquery";

data部分

内容的id没用到（因为html部分绑定的是hrefName 节省了后面拼接的麻烦）

      tabs: [
        {
          id: "line1",
          name: "译员管理服务规则处罚制度",
          hrefName: "#line1",
        },
        {
          id: "line2",
          name: "翻译质量评判标准",
          hrefName: "#line2",
        },
        {
          id: "line3",
          name: "翻译服务流程",
          hrefName: "#line3",
        },
      ],
      activeStep: "", // 默认选中的锚点的key值

//监听属性 类似于data概念
  computed: {
    scrollFn() {
      // 防抖
      return _.debounce(this.onScroll, 100);
    },
  },

//方法集合
  methods: {
    // 点击锚点
    anchorSelect(href) {
      $(href)[0].scrollIntoView({
        behavior: "smooth",
        // 定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"
        block: "start",
        // 定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"
        inline: "nearest",
        // 定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
      });
    },
    // 监听触发的锚点
    onScroll() {
      var top = $(document).scrollTop();// 获取目前高度
      var menu = $(".right_guDing_p"),
        jumbotronH = $(".jumbotronH"),
        currentID;
      jumbotronH.each(function () {
        var $this = $(this),
          jumbotronTop = $this.offset().top; //获取当前楼层的高度
        // console.log(top, jumbotronTop, $this);
        if (top > jumbotronTop - 10) {
          // $this.attr("id") 内容里面的id 
          currentID = "#" + $this.attr("id"); //每个小于top的楼层都会赋值一次，逐层覆盖替换，最后一层才是最后的id值
        } else {
          return false;
        }
      });
      this.activeStep = currentID || this.tabs[0].hrefName; // 赋值最后值  默认#line1 第一个下标
      //给相应楼层对应的附加到导航添加class
      if (this.activeStep) {
        //首先清除所有active
        menu.find(".active").removeClass("active");
        // 给相应导航添加激活状态  添加class
        menu.find("[id='" + this.activeStep + "']").addClass("active");
      }
    },
  },
//生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 开始监听
    window.addEventListener("scroll", this.scrollFn, true); // 监听滚动事件
    this.scrollFn(); // 初始给一下样式
  },
beforeDestroy() {
    // 结束监听 一定要结束它，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener("scroll", this.scrollFn, false);
  }, //生命周期 - 销毁之前

style内容

只展示了一部分功能性样式，其他的还需自己调试

.right {
  position: -webkit-sticky;
  position: sticky;
  top: -10px;
  left: 0;
  .right_guDing {
    .right_guDing_div {
      margin-right: 15px;
      border-right: solid 1px #eee;

      .right_guDing_p {
        padding-right: 15px;
        line-height: 45px;
        color: black;
        cursor: pointer;
      }
      .active {
        color: #2d8cf0;
      }
      .right_guDing_p:hover{
        color: #2d8cf0;
      }
    }
  }
}

有哪里不对还请大家指出