元素吸顶效果（vue3.2.7+js）

需求：右侧列表根据左侧的滚动超过显示的位置，让置顶显示
完整vue的视图部分

<div class="right-content" ref="rightContent">
      <div ref="rightAnchor">
        <!-- 右侧锚点菜单 -->
        <div class="right-content-two">
          <div class="right-content-two-list">
            <div class="right-content-two-one">
              <div></div>
              <span>基本信息</span>
            </div>
            <div class="right-content-two-one">
              <div></div>
              <span>求职意向</span>
            </div>
            <div class="right-content-two-one">
              <div></div>
              <span>能力与资历</span>
            </div>
          </div>
        </div>

        <!-- 附件列表 -->
        <div class="right-content-one" v-show="resume.length">
          <div class="right-content-title"> <span>附件</span> </div>
          <!--  v-if="resume.length <= 1 || isShowMore === true" -->
          <div>
            <div
              v-for="(item, index) in resume.slice(0, 1)"
              :key="index"
              class="right-content-paper-list"
            >
              <div class="right-content-paper-one">
                <img
                  :src="
                    item?.resume?.name.split('.').pop() === 'doc' ||
                    item?.resume?.name.split('.').pop() === 'docx'
                      ? side_2
                      : item?.resume?.name.split('.').pop() === 'pdf'
                      ? side_1
                      : side_3
                  "
                  alt=""
                />
                <span>{{ item?.resume?.name as never }}</span>
                <div class="btn-preview" @click="preview(item?.resume.url)">预览</div>
              </div>

              <!-- <div
                class="right-content-paper-one"
                v-for="(iSmall, iSmallIdx) in item.attachmentList"
                :key="iSmallIdx"
              >
                <img
                  :src="
                    iSmall?.name.split('.').pop() === 'doc' ||
                    iSmall.name.split('.').pop() === 'docx'
                      ? side_2
                      : iSmall?.name.split('.').pop() === 'pdf'
                      ? side_1
                      : side_3
                  "
                  alt=""
                />
                <span>{{ iSmall.name }}</span>

                <div class="btn-preview" @click="preview(iSmall.url)">预览</div>
              </div> -->

              <div class="more" @click="handleMore" v-show="isShowMore === true">
                <!-- && resume.length > 1 -->
                <span>更多</span>
                <img src="/src/assets/svg/preview/arrow_down.svg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

主要视图部分

<div class="right-content" ref="rightContent">
      <div ref="rightAnchor"></div>
</div>

js文件

const handleScroll = (e) => {
    const winHeight = e.target.scrollTop || document.documentElement.scrollTop;

    // let rectTop = rightAnchor.value.getBoundingClientRect().top;
    // console.log('rect:', rectTop);
    // if (rectTop <= -100) {
    if (winHeight >= 164) {
      rightAnchor.value.style.width = rightContent.value.clientWidth + 'px';
      rightAnchor.value.style.position = 'fixed';

      rightAnchor.value.style.top = 20 + 'px';
      rightAnchor.value.style.right = 10 + 'px';
    } else {
      rightAnchor.value.style.position = 'initial';
    }
  };

  onMounted(() => {
    init();

    nextTick(() => {
      window.addEventListener('scroll', handleScroll, true);
    });
  });

解释：
1.rightContent是因为固定定位之后，影响宽度，所有这里找父级的宽度用的
2.主要使用的是rightAnchor，根据这个ref绑定属性改变元素的css样式
3.handleScroll 监听滚动，这里滚定事件对元素的位置进行判断，到达指定位置给予样式