javascript - 使用 JQuery 添加/删除基于 div/section 更改的类

Question

我有一个固定的图像，我需要根据 div/section 的变化对其进行动画处理

<div class="fixed">
  <img src="some_image.jpg" class="child-fixed">
</div>

<section class="section" id="section-1">
//this is rotating section
</section>
<section class="section" id="section-2">
//this is flip section
</section>

CSS 看起来像这样，

.fixed{
position:fixed;
margin:50% auto;
width:50px;
height:50px;
}
.fixed-child{
width:100%;
height:100%;
margin:0;
padding:0;
}
.section{
height:100vh;
width:100vw;
}
.rotate{
//some css totate styles here
}
.flip{
//some css flip styles here
}

而 JQuery 代码将是这样的，

$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
    $('.fixed-child').addClass( "rotate");
 }elseif($(window).scrollTop() > 200){
    $('.fixed-child').addClass( "flip");
  }
 });
});

现在我需要在 section-1 上的图像上添加旋转类，并在使用 jquery 在 section-2 上删除旋转类并添加翻转类，

我搜索了那个，我找到了一些例子但是使用这些例子我可以添加/删除基于 jquery scrollTop() 方法的类，但是我希望 jquery 检测那个类并在我向下滚动和向上滚动副时添加相应的类 -反之亦然。

我没有编写旋转和翻转 CSS 代码来减少此处的行数。但那些翻转和旋转工作。

请帮我实现这种风格!

Answer 1

根据我从您的问题/评论中收集到的信息，您需要像 Waypoints 这样的东西

Waypoints is the easiest way to trigger a function when you scroll to an element.