Me pregunto si alguien puede explicar cómo puedo "apuntar" a diferentes valores de pageOffesetY cuando el espectador se desplaza.

Contexto: Estoy tratando de crear un sitio web simple. Cuando el usuario se desplaza hasta cierto punto (rueda hacia abajo como 3 veces) -> aparece un elemento (imagen) desde la derecha hasta el centro de la página . Hasta ahora todo bien, tengo un código ejecutándose que funciona. Se ve como esto :

 const square = document.querySelector('.square'); window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const val = scrolled * 0.5; square.style.transform = `translateX(${0.45 * val}%)`; square.style.borderRadius = `${0.025 * val}%`; square.style.height = `${0.1 * val}px`; square.style.width = `${0.1 * val}px`; });

Sin embargo, lo que quiero crear es una especie de "punto de ruptura", donde si el usuario se desplaza (por ejemplo, a la mitad de la primera sección) , el objeto comienza a moverse verticalmente (no horizontalmente a través de la propiedad TranslateX).

¿Cómo puedes controlar activamente QUÉ sucede dependiendo de DÓNDE esté el pergamino? (Supongo que tiene que ver con el valor de PageOffsetY).

¡Muchas gracias por adelantado!