I am wondering if somebody can please explain how can I "target" different values of the pageOffesetY when the viewer scrolls?

Context: I am trying to create a simple website. When the user scrolls to some extent (wheel down like 3 times) -> an element (image) appears from the right to the center of the page. So far so good, I got a code running that works. Looks like this :

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`;
});

However, what I want to create is sort of a "break point", where if the user scrolls to (e.g. middle of the 1st section), the object then starts to move vertically (not horizontally via TranslateX property).

How can you actively controll WHAT happends depending on WHERE the scroll is? (I am assuming it has to do with the PageOffsetY value).

Thank you very much in advance!