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

Question

[DeniSidorenko]

Добрый день, посмотрите пожалуйста на мокап. Красные блоки - простой контент. Желтый блок слайдер. Подскажите пожалуйста каким образом можно сделать( можно описать даже логику) что бы когда человек докрутил желтый квадрат до конца экрана( Желтый квадрат имеет 100% высоту) останавливается скролл и начинается смена слайдов( После желтого блока будут еще блоки( просто их не нарисовал). Слайдер я делаю и смену при скролле тоже. Мне важно события что желтый блок находится в позиции top 0 по отношению к экрану

Answer 1

[Сергей delphinpro]

Сначала получаем координаты желтого блока в документе https://learn.javascript.ru/coordinates-document

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

Следует учесть вариант, что строгое равенство не будет выполнено. Лучше делать сравнение ">=" и выполнять "доводку" блока при блокировке скролла.

Comments

[DeniSidorenko]

Спасибо

[DeniSidorenko]

Подскажите пожалуйста а каким образом сделать доводку блока без надобности вырвать из потока

[Сергей delphinpro]

DeniSidorenko, просто скролл страницы поправить:
window.scrollTop = blockPosition.X
по необходимости с анимацией.