新增时间轴项后背景无法切换的JavaScript技术求助

嘿，别慌！作为编程新手遇到这种JS问题太正常了，我帮你把这个bug修好。你遇到的问题根源在于原代码提前固定了时间轴项的数量，而且最后一项的滚动判断逻辑有问题，导致新增的项没法触发背景切换。

直接把你原来的JS代码替换成下面这个修改后的版本就行：

(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); 
    selectors.id.css("background-image", "url(" + selectors.item.first().find(selectors.img).attr("src") + ")"); 

    $(window).scroll(function() { 
      var pos = $(this).scrollTop(); 
      // 每次滚动时动态获取当前的时间轴项数量，适配新增的项
      var currentItemLength = selectors.item.length;
      
      selectors.item.each(function(i) { 
        var min = $(this).offset().top; 
        var max = $(this).height() + $(this).offset().top; 
        var $this = $(this);

        // 处理最后一项的激活逻辑：当滚动到最后一项的一半高度时触发
        if (i === currentItemLength - 1 && pos > min + $this.height() / 2) {
          selectors.item.removeClass(selectors.activeClass);
          selectors.id.css("background-image", "url(" + $this.find(selectors.img).attr('src') + ")");
          $this.addClass(selectors.activeClass);
        } 
        // 处理中间项的激活逻辑：当滚动位置在当前项范围内时触发
        else if (pos <= max - 40 && pos >= min) { 
          selectors.id.css("background-image", "url(" + $this.find(selectors.img).attr('src') + ")"); 
          selectors.item.removeClass(selectors.activeClass); 
          $this.addClass(selectors.activeClass); 
        } 
      }); 
    }); 
  } 
})(jQuery); 

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

我改了这几个关键地方： #

• 动态获取项数量：移除了原来提前定义的itemLength，改成每次滚动时获取currentItemLength，这样你新增时间轴项后，代码能自动识别到新的数量，不会再局限于初始的项数。
• 修复最后一项的判断逻辑：原来的i == itemLength - 2逻辑错误，会导致最后一项永远没法正确触发；现在改成判断当前项是最后一项（i === currentItemLength - 1），并且滚动到它的一半高度时激活，逻辑更准确。
• 统一变量命名：把that改成$this，更符合jQuery的命名习惯，代码可读性更好。

替换完代码后，你新增的时间轴项只要保持原来的HTML结构（带.timeline-item类，里面包含.timeline__img图片），滚动到新项时背景就会正常切换啦！

内容的提问来源于stack exchange，提问作者Edrich Mulder