Как сделать вертикальный липкий слайдер?

Question

[dark-cucumber]

Здравствуйте, хабровцы. Делаю заказ на фрилансе, столкнулся с проблемой. Гуглил, не смог найти подходящие темы на форумах, не нашел подходящий плагинов, писал сам. Вышло, как понимаете, через пятую точку. Уже у всех форумах спрашивал, всех чатах, но никто не может ответить.

Вот что у меня вышло
p.s. там начинается первый слайд с 12-ДЮЙМОВЫЙ СЕНСОРНЫЙ ЭКРАН UCONNECT®, нужно вниз проскролить.

У меня вышло: сделать конструкцию слайдера, изображение с правой стороны имеет липкое позиционирование, изминяется при скроллинге, когда меняется слайд. Текстовые элементы слева статические, они меняются при скроллинге, определяя активный слайд(увеличивается немного в размерах и цвет более черный).
У меня не вышло: написать условие, при котором меняется слайд. Оно вроде как на ПК разрешении работает, на другом не работает, на телефоне вообще не успеваешь дойти до слайда, а картинка уже меняется и тд.

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

Помогите пожалуйста решить проблему, я запутался, что я делаю не так?

Comments

[imko]

https://developer.mozilla.org/ru/docs/Web/CSS/position почитай про sticky, и сразу совет не используй скрипт для всего подряд, он редко нужен на обычный сайтах

Answer 1

[Антон Шаманов]

тебе нужно переключать слайды когда элемент +- по середине экрана и учитывать padding/margin элемента.

Comments

[dark-cucumber]

Хорошо, это не совсем то, что я бы хотел, приходится юзать свой "велосипед". Я учел отступы, стало вроде лучше, спасибо.

[Антон Шаманов]

dark-cucumber, был бы этот список подлиньше работало бы получше

Answer 2

[antares4045]

а телефон это какое разрешение?
просто я посмотрел: на всех стандартных разрешениях выглядит слегка стремновато, но работоспособно.

разве что я бы вам порекомендовал вычесть из scrollTop половину высоты экрана, чтобы картинка переключалась когда большая часть текста видна, а не "снизу показался первый пиксель заголовка".

Comments

[dark-cucumber]

Оно всё равно странно работать будет, я пробовал. Хз почему, но на мобильном экране как-то не так висчитывается scrollTop, или как? Разве что, я пробовал отступы между элементами убирать, тогда всё работает более коректно, отступы у меня задает CSS GRID(grid-gap), возможно это как-то неявно на высоту влияет

[antares4045]

dark-cucumber, scrollTop везде одинаковым обязан быть (JQuery на боевых проектах ни разу не использовал -- потому допускаю существование не известного мне бага)
У человека тут всё классно работает. Если не поможет: вечером, возможно, покопаюсь.