Fast Clip UX: A User Reaches out to a Section then A Video sticks with it

This work is based in the following meeting work, it relates to our goal for providing an interface that enables an user to access and traverse easily in a given learning journey comprised of many sections in a given page:

Fast Clip UX Design: Rearranging the Viewport: Ways to navigate page sub-elements

In this demonstration, using the mechanism refereed as “sticky”, you will see that the user reaches out to a section (gray area) where a video is referenced. In this section, the video is a sequencer to the available slides or sub-sections within this grayed area. The demo also attempts to cover:

• Video goes away when user moves beyond the section;
• User is able to click at subsection handlers (round buttons) — driving the page to the right subsection. However, you may see a problem in the desktop mode. Notice that, when the user clicks, the scroll position of the page should move to the header of the subsection at the top. This problem appeared as we solved the positioning for the mobile case, the case where the video covers and the page scroll was compensated;
• Mobile and desktop views.