Vue实现滚动吸顶，文案动态更改

Vue实现滚动吸顶，文案动态更改

1、效果和代码如下

<template>
  <div class="record">
    <div class="current-month">
      <p>{{currentTop}}</p>
    </div>
    <div class="record-list">
      <div
        class="record-list-wrap"
        v-if="list.length>0"
      >
        <div
          class="record-list-item"
          v-for="(item,index) in list"
          :key="index"
        >
          <div class="month">{{item.month}}</div>
          <div
            class="data-item"
            v-for="(item1,index1) in item.dataList"
            :key="index1"
          >
            <div class="line-one flex-box">
              <span class="num">{{item1.num}}</span>
            </div>

            <div class="line-three">
              <span class="remark">备注：{{item1.txt}}

              </span>

            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTop: "2022年5月",
      currentIndex: 0,
      list: [],
      listHeight: [],
    };
  },
  mounted() {
    this.init();
    this.$nextTick(() => {
      if (this.list.length == 0) return;
      this.getBoxHeight();
    });
    window.addEventListener("scroll", this.handleScroll); // 监听页面滚动
  },
  methods: {
    getBoxHeight() {
      setTimeout(() => {
        //延时计算元素的高度
        let rightItems = document.getElementsByClassName("record-list-item"); //获取指定类名的所有元素

        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < rightItems.length; i++) {
          let item = rightItems[i]; // 右边的每一个模块（蓝色标题 + 标题下面所带的内容）
          height += item.clientHeight;

          this.listHeight.push(height); // 把右边模块内容的高度全都放到一个数组中
        }

        this.list.forEach((item, index) => {
          // 把上面弄的那些高度分别放入总数据中，方便点击左边让右边滚动到所对应的模块
          this.$set(item, "distance", this.listHeight[index]);
        });
      }, 1000); //增加延时，等图片渲染完毕后进行计算
    },
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop == 0) this.currentIndex = 0;
      this.listHeight.forEach((v, index) => {
        let end = this.listHeight[index + 1]; // 右边模块内容的高度
        let start = this.listHeight[index]; // 右边模块内容的高度
        if (scrollTop > start && scrollTop < end) {
          this.currentIndex = index;
          this.currentTop = this.list[index].month;
        }
      });
    },
    // 初始化数据
    init() {
      this.list = [
        {
          month: "2022年5月",
          dataList: [
            {
              num: 10,
              txt: "文案文案文案文案文案文文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案案文案文案文案文案文案文案文案文案文案文案文案文案",
            },
          ],
        },
        {
          month: "2022年4月",
          dataList: [
            {
              num: 10,
              txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",
            },
          ],
        },
        {
          month: "2022年3月",
          dataList: [
            {
              num: 10,
              txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",
            },
            {
              num: 10,
              txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",
            },
            {
              num: 10,
              txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",
            },
          ],
        },
        {
          month: "2022年2月",
          dataList: [
            {
              num: 10,
              txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",
            },
          ],
        },
        {
          month: "2022年1月",
          dataList: [
            {
              num: 10,
              txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",
            },
          ],
        },
        {
          month: "2021年12月",
          dataList: [
            {
              num: 10,
              txt: "文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案",
            },
          ],
        },
      ];
    },
  },
};
</script>

<style lang='less' scoped>
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.record {
  color: #333333;
  background-color: #f0f0f0;
  font-size: 0.7rem;
  .current-month {
    height: 2rem;
    padding: 0 0.75rem;
    line-height: 2rem;
    position: fixed;
    top: 0;
    z-index: 10;
    background: #f0f0f0;
    left: 0;
    right: 0;
  }
  .record-list {
    .record-list-wrap {
      .record-list-item {
        .month {
          height: 2rem;
          padding: 0 0.75rem;
          line-height: 2rem;
        }

        .data-item {
          // padding: 0 0.75rem 0.5rem 0.75rem;
          background: #fff;
          border-bottom: 0.5rem solid #f0f0f0;
          padding: 0.5rem 0.75rem 0.5rem 0.75rem;
          .line-one {
            width: 100%;
            padding: 0.1rem 0;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            padding-top: 0.5rem;
            .num {
              font-size: 0.9rem;
              color: #0085d0;
            }
            .type {
              margin-top: 0.1rem;
            }
          }
          .line-three {
            .remark {
              font-size: 0.6rem;
              color: #999999;
            }
          }
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>