Page scrolling to switch pictures

      <div class="ticwatchgth-blood-oxygen">
        <div class="blood-oxygen-left">
          <div class="item">
            <div class="inner">
              <p class="sfBold txt title">测试</p>
              <p class="tip">正文</p>
            </div>
          </div>
          <div class="item">
            <div class="inner">
              <p class="txt">dasadasdasdddddd</p>
            </div>
          </div>
          <div class="item">
            <div class="inner">
              <p class="txt">aaaaaaaaddd</p>
            </div>
          </div>
        </div>
        <div class="blood-oxygen-right">
          <div class="inner">
            <div class="sticky">
              <div class="bg-img"></div>
              <div class="item-inner _item-inner">
                <div class="img-item img-item01 active">
                  <img :src="bloodImgList[0]"/>
                </div>
                <div class="img-item img-item02">
                  <div class="img-item02-inner">
                    <img :src="bloodImgList[1]"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

css

  .ticwatchgth-blood-oxygen {
    width: 100%;
    position: relative;
    display: flex;
    .blood-oxygen-left {
      width: 50%;
      position: relative;
      padding-left: 3rem;
      z-index: 2;
      flex: 1;
      p {
        font-size: .22rem;
        line-height: .36rem;
        &.tip {
          margin-top: 35vh;
          font-size: .14rem;
          line-height: .3rem;
        }
        &.title {
          font-size: .32rem;
          line-height: .55rem;
          padding-top: 3rem;
        }
      }
      .item {
        height: 100vh;
        display: flex;
        align-items: center;
        .inner {
          width: 5.45rem;
        }
        &.active {
          .inner {
            position: fixed;
            top: 50%;
            left: 3rem;
            width: 5.82rem;
            transform: translateY(-50%);
          }
        }
      }
    }
    .blood-oxygen-right {
      width: 50%;
      .inner {
        height: 100%;
        position: relative;
      }
      .sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
        height: 100vh;
        .bg-img {
          content: "";
          width: 100vw;
          height: 100vh;
          background: url('../img/ticwatchgth/ticwatchgth-blood-oxygen-bg.jpg') no-repeat center;
          background-size: cover;
          position: absolute;
          left: -50vw;
          top: 0;
          z-index: 1;
          overflow: hidden;
        }
      }
      .item-inner {
        position: relative;
        z-index: 2;
        height: 100vh;
      }
      .img-item {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        img {
          opacity: 0;
          transition: all 1s ease-in-out;
        }
        &.active img {
            opacity: 1;
        }
      }
      .img-item01 {
        img {
          width: 4.36rem;
        }
      }
      .img-item02 {
        .img-item02-inner {
          position: relative;
          &:after {
            content: "";
            width: 26.8vh;
            height: 30.2vh;
            position: absolute;
            background: url('../img/ticwatchgth/ticwatchgth-blood-highlight-img.png') no-repeat center;
            background-size: cover;
            top: 32%;
            left: 9%;
            transform: scale(1.5);
            opacity: 0;
            transition: all 1s linear;
          }
        }
        &.highlight .img-item02-inner:after {
            opacity: 1;
        }
        img {
          width: auto;
          height: 81.3vh;
        }
      }
    }
  }

js part

<script>
export default{
  data(){
      return{
          bloodImgList: [
            require('../img/aaaa.png'),
            require('../img/bbb.png'),
          ],
      }
  },
  mounted() {
    const vm = this;
    $(window).on('scroll', function(e) {
      let scrollTop = $(this).scrollTop();
      vm.bloodAnimate(scrollTop, e);
    });
  },
  methods:{
         bloodAnimate(scrollTop, e) {
        // blood oxygen
        let leftEleTop = $('.blood-oxygen-left').offset().top;
        let leftItemHeight = $('.blood-oxygen-left .item').height();
        if(scrollTop >= leftEleTop + leftItemHeight * 0.7) {
            $('._item-inner').find('.img-item').eq(1).addClass('active').siblings('.img-item').removeClass('active');
        }
        if(scrollTop >= leftEleTop + leftItemHeight * 1.4) {
            $('._item-inner').find('.img-item').eq(1).addClass('highlight');
        }
        if(scrollTop < leftEleTop + leftItemHeight * 1.4) {
            $('._item-inner').find('.img-item').eq(1).removeClass('highlight');
        }
        if(scrollTop < leftEleTop + leftItemHeight * 0.7) {
            $('._item-inner').find('.img-item').eq(0).addClass('active').siblings('.img-item').removeClass('active');
        }
      },
  }
}
</script>