How to make such functionality in the layout?

Good day, please look on mocap. Red blocks are simple content. The yellow block slider. Please tell me how to do( you can even describe the logic) would be that when people dokrutili yellow square to the end of the screen( Yellow square has 100% height) stops scrolling and starts the slide show( After the yellow block are still blocks( it is painted). Slider I do and shift at the best personal Finance too. Me important events that the yellow block is at position 0 at the top against the screen
image.png
March 23rd 20 at 19:08
2 answers
March 23rd 20 at 19:10
Solution
First get the coordinates of the yellow block in the document https://learn.javascript.ru/coordinates-document

Then listen to the onscroll on the window and when the window.scrollTop is equal to the Y coordinate of the block — the block will be located at the top of the screen.

You should consider the possibility that strict equality will fail. Better to do the comparison ">=" and perform "fine-tuning" of the unit when you lock the scroll.
Thank you - cleve commented on March 23rd 20 at 19:13
Please tell me how to do the finishing unit without the need to rip from a stream - cleve commented on March 23rd 20 at 19:16
@cleve, just scroll the page to correct:
window.scrollTop = blockPosition.X
as needed with animation. - Lavonne commented on March 23rd 20 at 19:19
March 23rd 20 at 19:12
in JS to catch the moment when the yellow block will occupy the screen to stop scrolling
Material scroll
or
to use a block for scrolling (but if it's really necessary)
here is an example plugin
www.thepetedesign.com/demos/onepage_scroll_demo.html

Find more questions by tags LayoutHTMLCSS