jQuery无法选中.pizza-menu-left类元素实现滚动动画该如何解决？

问题原因 #

.pizza-menu-left类元素属于menu.html内的内容，而jQuery的load()是异步网络请求方法，你在页面初始化时直接执行$(".pizza-menu-left")选择元素的代码时，menu.html还没完成请求和DOM插入，所以选中的是空对象，后续的类名操作自然全部无效。你之前尝试的live()、事件委托on()无效的原因是：事件委托仅适用于处理元素本身触发的事件（比如点击、输入事件），而本次逻辑绑定的是window的滚动事件，不存在事件委托的适用场景。

解决方法 #

方案1：将动画逻辑放入load的回调函数（推荐） #

load()方法支持传入回调函数，该函数会在对应HTML片段加载完成、且完全插入当前页面DOM后自动执行，此时选中元素必然存在。
修改后的完整代码如下：

$(() => { 

  /*  Components */
  $(".navbar_section").load("../components/navbar.html");
  $(".title_section").load("../components/title.html");
  $(".welcome_section").load("../components/welcome.html");
  $(".trust_section").load("../components/trust.html");
  // 为menu的load方法添加回调
  $(".menu_section").load("../components/menu.html", function() {
    var pizzaLeft = $(".pizza-menu-left");
    $(window).on("scroll", () => {
      var scroll = $(window).scrollTop();
      if (scroll >= 1500) {
        pizzaLeft.removeClass("roll-out-left").addClass("roll-in-left");
      } else {
        pizzaLeft.removeClass("roll-in-left").addClass("roll-out-left");
      }
    });
  });
  $(".parallax_section").load("../components/parallax.html");
  $(".location_section").load("../components/location.html");
  AOS.init();
});

方案2：滚动时实时查询元素 #

如果不想改动load的结构，也可以在每次触发滚动事件时再查询元素，未加载完成时直接跳过操作即可：

$(() => { 

  /*  Components */
  $(".navbar_section").load("../components/navbar.html");
  $(".title_section").load("../components/title.html");
  $(".welcome_section").load("../components/welcome.html");
  $(".trust_section").load("../components/trust.html");
  $(".menu_section").load("../components/menu.html");
  $(".parallax_section").load("../components/parallax.html");
  $(".location_section").load("../components/location.html");
  AOS.init();

  /*  Animations */
  $(window).on("scroll", () => {
    var scroll = $(window).scrollTop();
    // 滚动时实时查询元素
    var pizzaLeft = $(".pizza-menu-left");
    // 元素未加载完成则直接返回
    if (pizzaLeft.length === 0) return;
    if (scroll >= 1500) {
      pizzaLeft.removeClass("roll-out-left").addClass("roll-in-left");
    } else {
      pizzaLeft.removeClass("roll-in-left").addClass("roll-out-left");
    }
  });
});

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