▼
Streaming live at 10am (PST)

Transparent Sidebar Under heroSection Becoming "Sticky" When Scrolled Past and Updating Links On Scroll

#1

Hi All.
Sidebar Example : https://www.hioscar.com/why-oscar

  1. I am looking to create a sidebar, under a heroSection, that when scrolled to the top of the page becomes sticky.
  2. Once it sticks, I would like it to update the links' style to (highlight) based on the content that scrolls past the sidebar.
  3. The sidebar background should be transparent allowing full-width content background to fill the sidebar as it scrolls past.
  4. Lastly, at the end of the content I would like the sidebar to scroll again to reveal the footer.

Any ideas?

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

#2

Hi @insitu Welcome to the community! :slight_smile:

At this time, you cannot create that type of stickynav natively in Webflow. However, you can create a nav shown on scroll:

Also, you can set IDs to certain elements and link to those. As well as set custom styling to the certain navlink when it reaches that ID.

https://help.webflow.com/article/how-do-you-change-the-current-pseudo-class-selectors-styles

Hope this helps :slight_smile:

#3

Thanks @PixelGeek.

I think I will try some kind of work around using those techniques.

closed #4

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