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

【问题标题】：fadeIn in when in view, fadeOut when only bottom is visible在视图中淡入，仅在底部可见时淡出
【发布时间】：2013-03-22 08:26:39
【问题描述】：

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

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

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

感谢您的帮助。

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

【问题讨论】：

标签： jquery-waypoints

【解决方案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%' });

【讨论】：