jquery - 在向上滚动时添加类时遇到 jQuery 问题

Question

如果你看下面，我在偏移量 -185 处添加了几个类，当你向下滚动时，有两个是动画/淡入的。当您向上滚动超过偏移量时，我想让栏淡出，但我很难实现这一点。我正在使用 jQuery 航路点脚本 http://imakewebthings.com/jquery-waypoints/

$('#wrapper').waypoint(function(event, direction) {
    $('#scroll-action').toggleClass('hidden', direction === "up");
}, {
    offset: -185
}).find('#scroll-action').waypoint(function(event, direction) {
    $('#scroll-action').removeClass('hidden');
    $(this).parent().toggleClass('sticky', direction === "down");
    $('#scroll-action').addClass('animated fadeIn');
    event.stopPropagation();
}, {
    offset: -185
});

Answer 1

我认为您应该稍微简化一下，这样可以更轻松地解决您的问题。您将需要换出您的逻辑，但将其简化为仅使用带有 #wrapper 的航路点我认为是可行的方法。当您向下滚动并且 #wrapper 位于窗口上方 185px 时，然后淡入 #scroll-action。当你向上滚动然后淡出。我认为将航路点也放在 #scroll-action 上可能会导致两者发生冲突。

$(function() {
  $('#wrapper').waypoint(function(event, direction) {
    if(direction === "up") {
      $('#scroll-action').fadeOut();
    } else {
      $('#scroll-action').fadeIn();
    }
  }, { offset: -185});
});

Here's a jsFiddle that is similiar to what you are doing, so you can see this in action.确保将 HTML 窗口做得小一些。