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

【问题标题】：How can I control when a class is added to an element on scroll in jQuery如何控制何时将类添加到 jQuery 中的滚动元素
【发布时间】：2018-03-04 20:53:59
【问题描述】：

我正在使用以下 javascript 来在滚动页面时添加和删除一个类：

(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/ 我在这里想要实现的是在此时间轴上的每个元素出现时添加一个类。元素是模糊的，当它们进入视野时滚动时，模糊应该几乎立即消失，但是在上面的 jsfiddle 上，当元素已经在视野中时，它们会在很长一段时间内保持模糊。我怎样才能使它们变得可见，而不会像滚动时进入视口一样立即模糊？

【问题讨论】：

标签： jquery scroll offset scrolltop

【解决方案1】：

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

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

【讨论】：

是的，做到了！非常感谢！