到达最终接触部分时旋转我的箭头？

Question

我正在这个网站上工作：demo

我在右上角的网站中有一个固定的向下滚动箭头，我想旋转此箭头，使其在用户向下滚动到最后一个部分时指向顶部，当您向上滚动时，它返回到其原始旋转。我试过用在互联网上找到的一些JS来做这件事，但我无法让它发挥作用。

谁能帮我这个？它也可以与JS或JQuery一起使用。

这是我的代码：

.center-con2 {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 17px;
    position: absolute;
    z-index: 10;
    left: 0 !important;
    right: 0;
    margin: 0 auto !important;
}

.round2 {
    position: absolute;
    bottom: 20px;
    right: 40px;   
}

#cta2{
    width:100%;
    cursor: pointer;
    position: absolute;
}

  <div class="center-con2">
    <div class="round2">
        <div id="cta2">
        <a style="color: #18a8a4" href="#!"><i id="icon" style="font-size: 20px" class="fas fa-chevron-circle-down"></i></a>
        </div>
    </div>
</div>

Answer 1

$(document).on('scroll', function() {
    if($(this).scrollTop()>=$('#theTarget').position().top){
        flipTheImageHere();
    }
})

我会使用这样的jQuery函数，当你滚动到ID时检测到，当你在那里翻转它时，否则将其翻转。