Double Agent Scroll

JS Module that automatically updates nav element or list group based on scroll position to indicate which link is currently active in the viewport. Also, when nav elements or list groups are clicked smooth scroll is being applied plus history push state.

How it works

In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.

Requirements

On the scrollable container, add data-scroll-target="{myID}" and on the navigation container id="{myID}" where the ID string must be the same on the scrollable container which is the unique id of the associated navigation.