我正在这个网站上工作: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>
最佳答案
$(document).on('scroll', function() {
if($(this).scrollTop()>=$('#theTarget').position().top){
flipTheImageHere();
}
})
我会使用这样的 jQuery 函数,检测何时滚动到某个 ID 以及何时翻转它,否则翻转回来。
关于javascript - 到达最终接触部分时旋转我的箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55345240/