Tengo una lista con muchos li Me gustaría agregar una clase a cada li solo cuando me desplazo a ese li específico El problema es que la clase se agrega a cada li una vez que me desplazo a solo 1 de ellos
$(window).scroll(function(e) { var y = $(document).scrollTop(); var h = $(window).height(); var t = $('li.product'); var length = t.length; for(var i=1;i <= length;){ var number = 'li.product:nth-child('+i+')'; if(y + h > $(number).position().top){ $(number).addClass("animate__animated animate__fadeInDown"); } i++; }});Gracias de antemano
No pude encontrar el problema con su código, así que hice otra versión de su código. Puede encontrarlo en https://codepen.io/beneji/pen/RwLQLVV .
El código usa .each en lugar de un bucle for que se ajusta mejor en este caso.
Puedes ajustar este código a tu caso particular.
$(window).scroll(function(){ const scrolling_position = $(window).scrollTop() const window_height = $(window).height() $("li.product").each(function(){ const product_position = $(this).position().top if(product_position <= scrolling_position + window_height) $(this).addClass("animate__animated animate__fadeInDown") // replace this by whatever class you want }); })Considera lo siguiente.
$(window).scroll(function(e) { var y = $(document).scrollTop(); var h = $(window).height(); var t = $('li.product'); t.each(function(i, el) { if ((y + h) > $(el).position().top) { $(el).addClass("animate__animated animate__fadeInDown"); } }); });Esto no se probó porque no proporcionó un ejemplo mínimo y reproducible .
Usando .each() podemos iterar cada uno de los elementos. i es el Índice y el es el Elemento mismo.