Hope you're doing great :)
I'm trying to make a rolling animation and I've this code in my local jquery.js file:
$(() => {
/* 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");
}
});
});
});
The problem is this, .pizza-menu-left doesn't get selected, but all the classes above do. I've tried, live(), on(), but nothing seems to work. I know it's all about the time of the DOM objects and attributes being created, certainly, the function above is running before the class attribute is set. Still, I don't know how to get around this.
Assuming .pizza-menu-left are elements that are loaded dynamically, they will not be available when the onload function runs, so you'll need to define that variable inside the event handler.
$(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");
}
});
});