Question

我正在使用以下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上，元素在已经处于视野中时会保持模糊很长时间。我怎么能让它们变得可见，在滚动时进入视口时几乎不会立即模糊？

Answer 1

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

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

如何在jQuery中滚动时将类添加到元素中进行控制

1 个答案: