How to make a vertical sticky slider?

Question

css

Hello, habrovtsy. I'm doing an order for freelance, I ran into a problem. Googled, could not find suitable topics on the forums, did not find suitable plugins, I wrote it myself. It came out, as you know, through the fifth point. Already asked all the forums, all the chat rooms, but no one can answer.

Here's what I got
ps there the first slide starts with a 12" UCONNECT® TOUCH SCREEN, you have to scroll down.

It worked out for me: to make a slider design, the image on the right side has a sticky positioning, it changes when scrolling when the slide changes. The text elements on the left are static, they change when scrolling, defining the active slide (increases slightly in size and the color is more black).
It didn't work out for me: write a condition under which the slide changes. It seems to work on a PC resolution, it doesn’t work on another one, on a phone you don’t have time to get to the slide at all, but the picture is already changing, and so on.

// когда прокрутка окна/страницы достигает слайда(текстовый элемент, тот что слева)
if($(window).scrollTop() <= $(el).offset().top)
{
    // some code
}

Please help me solve the problem, I'm confused, what am I doing wrong?

Answer 1

you need to switch slides when the element is +- in the middle of the screen and respect the element's padding/margin.

Answer 2

What is the resolution of the phone?
I just looked: at all standard resolutions it looks a bit dumb, but it works.
except that I would recommend that you subtract half the height of the screen from scrollTop so that the picture switches when most of the text is visible, and not "the first pixel of the title appeared from the bottom."