jquery-waypoints - 在视图中淡入，仅在底部可见时淡出

Question

我正在使用航点插件，但对其他人开放。到目前为止，当我向下滚动并达到 30% 时，我已经设法让 div 淡入淡出：

element.waypoint(function(){            
    $(this).animate({ opacity: 1 }, 500);          
},{
    offset: '30%'
}); 

但是当它再次消失时，我无法让它再次消失。

谢谢您的帮助。

对于强大的stackoverflow来说，这是一个太难的问题吗？...

Answer 1

direction当您使用传递给函数的参数越过该航路点触发点时，您可以根据滚动的方向执行不同的操作：

element.waypont(function(direction) {
  if (direction === 'down') { ... }
  else { ... }
}, { offset: '30%' });

您还可以创建具有不同偏移量的多个航点，这样您就可以对碰到页面不同部分的元素做出反应：

element
  .waypoint(function(direction) {
    $(this).toggleClass('visible');
  }, { offset: '10%' })
  .waypoint(function(direction) {
    $(this).toggleClass('visible');
  }, { offset: '90%' });