@DeniSidorenko

Как сделать такой функционал в верстке?

Добрый день, посмотрите пожалуйста на мокап. Красные блоки - простой контент. Желтый блок слайдер. Подскажите пожалуйста каким образом можно сделать( можно описать даже логику) что бы когда человек докрутил желтый квадрат до конца экрана( Желтый квадрат имеет 100% высоту) останавливается скролл и начинается смена слайдов( После желтого блока будут еще блоки( просто их не нарисовал). Слайдер я делаю и смену при скролле тоже. Мне важно события что желтый блок находится в позиции top 0 по отношению к экрану
image.png
  • Вопрос задан
  • 142 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Сначала получаем координаты желтого блока в документе https://learn.javascript.ru/coordinates-document

Потом слушаем onscroll на window и когда window.scrollTop будет равен координате Y блока — блок будет находится вверху экрана.

Следует учесть вариант, что строгое равенство не будет выполнено. Лучше делать сравнение ">=" и выполнять "доводку" блока при блокировке скролла.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
NooBiToo
@NooBiToo
в JS отловить момент когда желтый блок полностью займет экран и остановить скролл
Материал по скроллу
или
использовать по блочный скролл (но если это и вправду необходимо)
вот пример плагина
www.thepetedesign.com/demos/onepage_scroll_demo.html
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы