Is it possible to get this pattern to work in Webflow

I’m hoping to get this pattern called Scroll Spy (at least that’s what it is called in Bootstrap). Is it possible to get this pattern to work in Webflow

I posted a link below for an example. Essentially there is a list of content on the right side of the page. As you scroll through the content it selects the item you’re on in the nav to the right of the page. If you click one of the right-aligned nav items it takes you to that place in the page content.

1 Like

This is possible with native WF tools!

Here is a blog post on how to create this sticky sidebar
https://webflow.com/blog/build-a-sticky-aside-in-webflow

If you place links inside it, and link them to sections, you have access to the “current” state for styling

Nice. The last part of that functionality that would be ideal would be to highlight the anchor if you’ve scrolled to a certain section but this gets me 75% of the way there. I can prob figure out how to code that if I can accomplish in Webflow

1 Like

When you created that sticky element, place links inside it and give them a class.

Now go through your sections on that page you want the links to scroll to when clicked and change style when that section is visible.
For each section go to the settings tab and assign them a id! Make them unique :slight_smile:

Now go back to the links and also in the settings tab in the link settings click on “link to sections” and choose the id you want it to be assigned to!

image

If you now have one of the section in the middle of the viewport, click on the corresponding link in the sidebar and you should see an additional class on that link called “current”

image

When this class is active you can set the styling you want all the links to have when their section is active. Give the basic link class that is not active (no “current” class) the transition=all attribute and they will have a smooth transition, no abrupt switching!

image

Hope this helps!

Awesome. Thanks for sharing that. I really appreciate it. I’m going to try getting this working today when I get some time. Need this for my next project

1 Like

Hey thanks for the help. I got that working!

1 Like

Awesome! Glad it worked

One thing I was having an issue with was assigning state to the link. I was googling around and it looks like webflow only offers you the ability to add state to something if it links to another page?

Can you specify what you mean by state?
States on elements like active, hover, pressed etc?

I figured it out. The option to change hover, active states for example have moved from where they are in almost every tutorial Ive found to an unlabeled dropdown below. Thanks for the help though. I was almost ready to throw in the towel lol

1 Like

Yeah the UI changed a bit a while ago… Glad you found it :slight_smile: