Sticky side nav bar to the top of page section - becomes fixed after scroll down

Can’t seem to find any threads on this.

I have designed a fixed side nav bar under a hero section.

Here’s the issue:

  • The page forces the nav bar to be fixed on scroll exactly where it is in reference to the page load.

  • Because of its placement, it interferes with the footer on different devices

The Solution (In a perfect world)

  • To keep the nav bar exactly where it is upon page load (at the top next to “Chat”)

  • After scrolling past the nav bar - the moment it hits the top of the page/section (“Chat”) it becomes fixed and follows the user and does not interfere with the footer.

  • Goes back to its original location when scrolling back to header seamlessly

Images provided below as well as preview.

Go to > CleanSpeak Use Cases

https://preview.webflow.com/preview/inversoft-v11-0-0-00e0e1e87d5b3282b562c?preview=79c1604890a1293023db293f6d3c8ab7

Preview Link: http://inversoft-v11-0-0-00e0e1e87d5b3282b562c.webflow.io/products/cleanspeak-use-cases/cleanspeak-use-cases

Much appreciated!


UPDATE

Like this bad boy!


UPDATE 2

Lug nut … FIXED IT!

For all of you down the road looking for a resource like this …

https://discourse.webflow.com/t/scrolling-then-sticking-navbar/27680

You’re welcome!

Here is my public share link: LINK
(how to access public share link)

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.