Active Menu Button in Header that changes on page scroll

Hey all,

I’ve struck an issue I can’t solve.

I have a page with a bunch of buttons at the top of the screen that scroll you down to relevant section on the page, when you click the button, the button changes color to indicate you are on that section of the page (see image below for context).

What I want to do is to make the buttons change color as the relevant sections come into view if the user decides to scroll the page rather than click the buttons, it’s pretty common on websites built with other tools but I cant seam to figure out a method in bubble.

I’m open to native bubble and code based solutions should anyone be able to help!!

Screen Shot 2022-03-04 at 9.21.33 am

Hi @chad5, the only way I believe this could be achieved in Bubble is using a conditional on the button, using “Current page scrolling position” as per the following example.

image

There’s a big limitation with this if you have a responsive site that enlarges vertically since your pixel reference will change.

On the other hand this plugin (which I haven’t tested) might do the trick for you:

2 Likes

Hi @chad5 ,

Yes, our Scrollspy plugin can do that :slight_smile:

Here’s the demo:

Thank you @aestela for sharing!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.