Sticky Nav inspired by Porsche

ben-duchy — Fri, 20 Jan 2023 10:08:27 GMT

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?

Re: Sticky Nav inspired by Porsche

alyssamwilie — Fri, 20 Jan 2023 14:24:53 GMT

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-javascript--cms-28510

topic Re: Sticky Nav inspired by Porsche in CMS Development

Sticky Nav inspired by Porsche

Re: Sticky Nav inspired by Porsche