求大牛这种网页效果怎么实现的

Question

https://www.candidco.com/about/
左边图片不动 文字滚动的效果我是用position: sticky;实现的。
但文字滚动到一定程度直接切换到下一张图片的效果不知道怎么做。

 <div class="mv-about-container">
                <div class="about-left">
                    <div class="image-container">
                        <img src="./imgs/[e-mail]" alt="关于">
                    </div>
                    <div class="image-container" style="top: 0px;">
                        <img src="./imgs/[e-mail]" alt="关于">
                    </div>
                </div>
                <div class="about-right">
                    <div class="text-container" style="margin: 0;">
                        <span>我们的使命</span>
                        <div class="text-content">
                            <p>
                                让更多人享受到数字化正畸技术的益处。当人们感到幸福快乐时会露出开心的笑容，这是我们每个人的天性。为什么一些人想要微笑却又不敢笑呢？不完美的笑容总会让一些人羞于微笑，这其中绝大部分是因为牙齿问题导致的。长久以来，无数想要笑起来更好看的人们都想过通过正畸实现美丽微笑的梦想，却因高不可攀的费用和艰难痛苦的过程遗憾放弃了。而笑研所始终相信，自然美丽的微笑是每个人的权利。我们希望人们不再对牙科感到恐惧和紧张，不再担忧高昂的正畸价格和糟糕的医疗服务。我们致力于通过不断创新的科技和不断改进的服务帮助更多人拥有自然而美丽的笑容，同时降低用户的成本、提高用户的体验。价格少60%、关爱多100%，我们将尽力让更多人享受数字化正畸的益处。
                            </p>
                        </div>
                    </div>
              
                    <div class="text-container" style="margin-top: 6.9rem;">
                        <span>我们的产品</span>
                        <div class="text-content">
                            <p>
                                让更多人享受到数字化正畸技术的益处。当人们感到幸福快乐时会露出开心的笑容，这是我们每个人的天性。为什么一些人想要微笑却又不敢笑呢？不完美的笑容总会让一些人羞于微笑，这其中绝大部分是因为牙齿问题导致的。长久以来，无数想要笑起来更好看的人们都想过通过正畸实现美丽微笑的梦想，却因高不可攀的费用和艰难痛苦的过程遗憾放弃了。而笑研所始终相信，自然美丽的微笑是每个人的权利。我们希望人们不再对牙科感到恐惧和紧张，不再担忧高昂的正畸价格和糟糕的医疗服务。我们致力于通过不断创新的科技和不断改进的服务帮助更多人拥有自然而美丽的笑容，同时降低用户的成本、提高用户的体验。价格少60%、关爱多100%，我们将尽力让更多人享受数字化正畸的益处。
                            </p>
                        </div>
                    </div>
                </div>
            </div>

.mv-about-wrapper .mv-about-container {
    margin-top: .5rem;
    display: flex;
    justify-content: space-between
}

.mv-about-wrapper .mv-about-container .about-left {
    flex: 0 0 57%
}

.mv-about-wrapper .mv-about-container .about-left .image-container {
    height: 10rem;
    width: 100%;
}

.mv-about-wrapper .mv-about-container .about-left .image-container img {
    position: sticky;
    top: .9rem;
    width: 100%
}

.mv-about-wrapper .mv-about-container .about-right {
    flex: 0 0 39%
}

.mv-about-wrapper .mv-about-container .about-right .text-container {
    margin-top: 1.1rem
}

.mv-about-wrapper .mv-about-container .about-right .text-container span {
    font-size: .26rem;
    color: #333
}

.mv-about-wrapper .mv-about-container .about-right .text-container .text-content {
    font-size: .16rem;
    margin-top: .2rem;
    color: #666
}

.mv-about-wrapper .mv-about-container .about-right .text-container .text-content p:first-child {
    margin: 0
}

.mv-about-wrapper .mv-about-container .about-right .text-container .text-content p {
    margin-top: .3rem;
    line-height: .24rem
}

Answer 1

他这个的切换是全部叠加到一起的，后面的图片会默认覆盖到上面的图片上面，然后通过opacity:0或者1来判断显示隐藏

Answer 2

得用js配合，不然即使你用css达到了切换效果，滚动到底部的时候，图片你怎么去隐藏呢。
监听一下混动条进度就可以了。

Answer 3

你是指让左侧的固定的图片切换到下一个图片吗？