Espero que lo estés haciendo genial :)
Estoy tratando de hacer una animación rodante y tengo este código en mi archivo jquery.js local:
$(() => { /* 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 */ $(function () { var pizzaLeft = $(".pizza-menu-left"); $(window).on("scroll", () => { var scroll = $(window).scrollTop(); if (scroll >= 1500) { pizzaLeft.removeClass("roll-out-left"); return pizzaLeft.addClass("roll-in-left"); } else { pizzaLeft.removeClass("roll-in-left"); return pizzaLeft.addClass("roll-out-left"); } }); }); });El problema es este, .pizza-menu-left no se selecciona, pero todas las clases anteriores sí. Lo he intentado, live(), on(), pero nada parece funcionar. Sé que se trata de la hora en que se crean los objetos y atributos DOM, ciertamente, la función anterior se ejecuta antes de que se establezca el atributo de clase. Aún así, no sé cómo evitar esto.
Suponiendo .pizza-menu-left son elementos que se cargan dinámicamente, no estarán disponibles cuando se ejecute la función de carga, por lo que deberá definir esa variable dentro del controlador de eventos.
$(function () { $(window).on("scroll", () => { var pizzaLeft = $(".pizza-menu-left"); var scroll = $(window).scrollTop(); if (scroll >= 1500) { pizzaLeft.removeClass("roll-out-left"); return pizzaLeft.addClass("roll-in-left"); } else { pizzaLeft.removeClass("roll-in-left"); return pizzaLeft.addClass("roll-out-left"); } }); });