vue项目开发，要求侧栏跟随页面滚动而滚动，主体滚动侧栏对应菜单自动高亮。

<!--
@Time : 2022/10/13 6:53 上午
@Author : yekong
@File : ccf.vue
@Software : PhpStorm
-->
<template>
  <div>
    <header2></header2>
    <banner></banner>
    <div class="main">
      <div class="conment">
        <div class="left">
          <a :class="{'active': navgatorIndex===0}" @click="handleLeft(0)">主人寄语</a>
          <a :class="{'active': navgatorIndex===1}" @click="handleLeft(1)">中心概况</a>
          <a :class="{'active': navgatorIndex===2}" @click="handleLeft(2)">中心成员</a>
          <a :class="{'active': navgatorIndex===3}" @click="handleLeft(3)">中心活动</a>
        </div>
        <div class="right">
          <div id="id0">
            <div class="md" id="ids0"></div>
            <jiyu></jiyu>
          </div>
          <div id="id1">
            <div class="md" id="ids1"></div>
            <gaikuang></gaikuang>
          </div>
          <div id="id2">
            <div class="md" id="ids2"></div>
            <chengyuan></chengyuan>
          </div>
          <div id="id3">
            <div class="md" id="ids3"></div>
            <huodong></huodong>
          </div>
        </div>
      </div>
    </div>
    <footer2></footer2>
  </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
import {config, api, ax, dat, click} from '../../utils/api2'
import footer2 from "@/components/footer";
import header2 from "@/components/header";
import banner from "./components/banner";
import gaikuang from "@/views/ccf/components/gaikuang";
import chengyuan from "@/views/ccf/components/chengyuan";
import huodong from "@/views/ccf/components/huodong";
import jiyu from "@/views/ccf/components/jiyu";

export default {
  name: "investment",
  components: {footer2, header2, banner, gaikuang, chengyuan, huodong, jiyu},
  data() {
    return {
      config: config,
      ax: ax,
      api: api,
      dat: dat,
      click: click,
      sear: true,
      searcla: "主题",
      scrollTop: 0,
      areaList: [],
      index: 0,
      navgatorIndex: 0,
      listBoxState: true,
      listBox: ['主人寄语', '中心概况', '中心成员', '中心活动']
    }
  },
  mounted() {
    let timeId;
    window.addEventListener('scroll', () => { // 页面滚动停止100毫秒后才会执行下面的函数。
      clearTimeout(timeId);
      timeId = setTimeout(() => {
        this.scrollToTop2();
      }, 100);
    }, true);
  },
  created() {
    window.addEventListener('scroll', this.scrollToTop, true)
  },
  methods: {
    handleLeft(index) {
      this.navgatorIndex = index;
      this.$el.querySelector(`#ids${index}`).scrollIntoView({
        behavior: "smooth",  // 平滑过渡
        block: "start"  // 上边框与视窗顶部平齐。默认值
      });
      this.listBoxState = false;

      let timeId;
      clearTimeout(timeId);
      timeId = setTimeout(() => {
        this.listBoxState = true;
      }, 200);
    },
    scrollToTop2() { // 获取视窗高度
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (this.listBoxState) {//作用是点击导航栏时，延迟这里执行。
        this.listBox.map((v, i) => { // 获取监听元素距离视窗顶部距离
          var offsetTop = document.getElementById(`id${i}`).offsetTop; // 获取监听元素本身高度
          var scrollHeight = document.getElementById(`id${i}`).scrollHeight; // 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度 // 则表示页面已经滚动到可视区了。
          if (scrollTop >= offsetTop - 100 && scrollTop <= (offsetTop + scrollHeight)) { // 导航栏背景色选中
            this.navgatorIndex = i;
          }
        })
      }
    },
    scrollToTop() {
      const that = this
      let scrollTop = "";
      scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 500) {
        $('.conment .left').addClass('flex');
      } else {
        $('.conment .left').removeClass('flex');
      }
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  background-color: #f4f4f4;
  width: 100%;
  overflow: hidden;
  padding: 46px 0 90px;
}

.left {
  float: left;
  width: 168px;
  background-color: #FFFFFF;
  line-height: 56px;
}

.flex {
  position: fixed;
  top: 85px;
}

.fullSlide {
  margin-bottom: 0;
}

.left a {
  display: block;
  text-align: center;
  font-size: 18px;
  color: #fff;
  background: #5daeff;
  border-bottom: 1px solid #fff;
  //border-left: 3px solid #FFFFFF;
}

.left a.active {
  color: #fff;
  background: rgba(0, 121, 242, 1.00);
}

.left a:hover {
  color: #fff;
  background: rgba(0, 121, 242, 1.00);
}

.right {
  float: right;
  width: 1150px;
  min-height: 500px;
  background-color: #FFFFFF;
}

.right h4 {
  text-align: center;
  line-height: 128px;
  font-size: 22px;
  font-weight: bold;
  font-family: initial;
}

.right div p {
  line-height: 30px;
  font-size: 14px;
  text-indent: 2em;
}

.about1x {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;

  .lesson {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;

    .lesson2 {
      width: 550px;
      height: 310px;
      margin-bottom: 20px;
    }
  }
}

.md {
  margin-top: -100px;
  height: 100px;
  padding-top: 0;
}
</style>