Me gustaría crear un elemento adhesivo que desaparezca cuando cierto div (botellas) llegue al final de la pantalla.

Tengo este código que funciona:

 function update() { const bottles = document.getElementById("bottles"); const rect = bottles.getBoundingClientRect(); const distance = window.innerHeight - rect.bottom; //value is 0 when bottom of bottles is at the bottom of screen if (distance < 0) { Array.from(document.getElementsByClassName("sticky-element")).forEach((el) => el.classList.remove("hidden")); } else { Array.from(document.getElementsByClassName("sticky-element")).forEach((el) => el.classList.add("hidden")); } } document.addEventListener('scroll', update); update();

Sin embargo, este no es el mejor código y será parte de las pruebas AB, por lo que las distancias tendrían que ser diferentes. Por lo tanto, traté de hacer algo como esto, pero no funciona:

 function update(distance) { if (distance < 0) { Array.from(document.getElementsByClassName("sticky-element")).forEach((el) => el.classList.remove("hidden")); } else { Array.from(document.getElementsByClassName("sticky-element")).forEach((el) => el.classList.add("hidden")); } }

En el caso de la opción A:

 function elementDistance() { const bottles = document.getElementById("bottles"); const rect = bottles.getBoundingClientRect(); const distance = window.innerHeight - rect.bottom; //value is 0 when bottom of bottles is at the bottom of screen return distance; } document.addEventListener('scroll', update); document.addEventListener('scroll', elementDistance); update(elementDistance);

En el caso de la opción B:

 function elementDistance() { const distance = some other values return distance; } document.addEventListener('scroll', update); document.addEventListener('scroll', elementDistance); update(elementDistance);