Sticky Nav inspired by Porsche

[ben-duchy]

I've come across this page on mobile and really like the sticky navigation found underneath the initial carousel; https://www.porsche.com/uk/models/718/718-models/718-cayman-gts-4/

I've manaaged to build s similar sticky navigation, but I can't figure out how they've managed to get the navigation bar to move across automtically so that the active button is always visible.

Any developers out there able to shed some light on how this function is pulled off?

[alyssamwilie · Accepted solution]

They use JavaScript to check when a section comes into view and sets the appropriate link to 'active'. You can see some example code of this here:
https://dev.to/areeburrub/change-nav-link-s-style-as-you-scroll-4p62

As for the moving underline it looks like when a link changes to active they use JavaScript to calculate the location of the link and apply a transformation to animate the movement. Something similar to this:
https://webdesign.tutsplus.com/tutorials/how-to-build-a-shifting-underline-hover-effect-with-css-and...