我有一个带有“dipper”类的 div 标签
<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”中淡入淡出的CSS
.dipper {
opacity: 0;
transition: all 200ms ease-in;
}
.js-dipper-animate {
opacity: 1;
}
我想在第一个 div 下添加另一个具有相同效果的 div。
当滚动到屏幕的某个位置时,第一个 div 就会出现。
然后,当第一个 div 接近结尾时,第二个 div 将淡入,而第一个 div 仍然存在。
最佳答案
我找到了答案here
<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%'
});
});
关于javascript - 在多个元素上设置路径点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49827563/