如何控制何时将 class 添加到 jQuery 中滚动的元素

Question

我正在使用以下 javascript 以便在滚动页面时添加和删除 class：

(function($) {
  $.fn.timeline = function() {
    var selectors = {
    id: $(this),
    item: $(this).find(".timeline-item"),
    activeClass: "timeline-item--active",
    img: ".timeline__img"
  };
  selectors.item.eq(0).addClass(selectors.activeClass);

  var itemLength = selectors.item.length;

  $(window).scroll(function() {
    var max, min;
    var pos = $(this).scrollTop();
    selectors.item.each(function(i) {
      min = $(this).offset().top;
      max = ($(this).height() + $(this).offset().top);
      if (i == itemLength - 2 && pos > min + $(this).height() / 2) {
        selectors.item.removeClass(selectors.activeClass);
        selectors.item.first().addClass(selectors.activeClass);
        selectors.item.last().addClass(selectors.activeClass);
      } else if (pos <= max - 40 && pos >= min) {
        selectors.item.removeClass(selectors.activeClass);
        $(this).addClass(selectors.activeClass);
      }

    });
  });
 }

 $("#timeline-1").timeline();

 })(jQuery);

我已经整理了以下 jsfiddle：https://jsfiddle.net/gpzfhwfq/ 我在这里想要实现的是在这个时间轴上的每个元素出现时添加一个 class。元素是模糊的，当它们进入视图时滚动时，模糊应该几乎立即消失，但在元素上方的 jsfiddle 上，当已经在视图中时，元素会在很长一段时间内保持模糊。我怎样才能使它们变得可见，并且几乎在滚动时进入视口时几乎没有模糊？

Answer 1

问题出在定位和"else if"语句中。应该为每个项目单独删除活动 class，而不是一次删除所有项目。我稍微改变了定位：

    } else if (pos <= max && pos >= min - window.innerHeight + $(this).height()/2) {
        $(this).addClass(selectors.activeClass);
    } else{
        $(this).removeClass(selectors.activeClass);
    }

如何控制何时将 class 添加到 jQuery 中滚动的元素

How can I control when a class is added to an element on scroll in jQuery

jquery

scroll

offset

scrolltop