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以及何时将其翻转，否则将其翻转回去。

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

1 个答案: