Dynamic Breadcrumbs using sections of page for hierarchy

Question

Working on creating a dynamic breadcrumb plugin using either jQuery or Javascript, and I do not have the knowledge to make it change dynamically while you scroll the page.

So we have a fixed header element, that will house the navigation and breadcrumbs. While scrolling down the page, I would like the breadcrumb navigation element to change based on what section I am scrolling past.

Is this possible?

I appreciate any help or suggestions.

Answer 1

I believe this is possible. You can use <name> or <id> tags similar to the way you want to direct someone to a certain part of a page.

I would use those to determine whether an element is in the viewport or outside of it.

If you are okay with using a plugin you should go with the JQuery isInViewport plugin :

https://plugins.jquery.com/isInViewport/

You can also take a look at the raw code and change it to your liking.