Javascript 在多模块元素上设置航路点

我有一个标有“北斗七星”的div标签

我想在第一个div下添加另一个具有相同效果的div

第一个div将在屏幕的某一部分显示

然后，当第一个div接近尾声时，第二个div将淡入，而第一个div保持不变

我找到了答案

$（文档）.ready（函数（）{
//为页面上的所有页面部分设置一个航路点
变量ppWaypoint=$（'.dipper'）。航路点（函数（方向）{
//检查方向
如果（方向==“向下”）{
//添加类以开始动画
$（this.element）.addClass（'show'）；
//然后摧毁这个航路点，我们不再需要它了
这个。销毁（）；
}
}, {
//设置偏移量
抵销：“75%”
});
});

<div class = "dipper">
<p>Peekaboo</p>
</div>

<script type="text/javascript">

    var $dipper = $('.dipper');

    $dipper.waypoint(function (direction) {
        if (direction == 'down') {

        $dipper.addClass('js-dipper-animate');
    }

    else{

        $dipper.removeClass('js-dipper-animate');
    }

    }, { offset: '75%' });



</script>

.dipper {

opacity: 0;
transition: all 200ms ease-in;
}

.js-dipper-animate {

opacity: 1;
}

<script type="text/javascript">
$(document).ready(function(){
//set a waypoint for all the page parts on the page
var ppWaypoint = $('.dipper').waypoint(function(direction) {
    //check the direction
    if(direction == 'down') {
        //add the class to start the animation
        $(this.element).addClass('show');
        //then destroy this waypoint, we don't need it anymore
        this.destroy();
    }

}, {
    //Set the offset
    offset: '75%'
});
});