Forum Academy Marketplace Showcase Pricing Features

Floating ToC - need an education on how to build a plugin

Need help Plugins
#1

Hi folks,

I’d like to have a floating Table of Contents that is:

  1. Dynamically generated
  2. Scrolls smoothly to location when clicked
  3. Highlights ToC item when the scroll reaches that location.

For example, something like this code:

Here’s a demo of it in action:
https://www.cssscript.com/demo/update-navigation-scroll-position-scrollspy/

How might I go about making (something like) this work with or without a plugin? Appreciate anyone pointing me in the right direction here.

I’m not a JS, CSS, or a plugin guru. But I understand code and am technically inclined. I guess I’m trying to understand what exactly I’d have to do to make this work, or if I’m in over my skis?

Yes, I know about this. Still just trying to get my bearings. Appreciate any help!

Cheers,
Al

#2

Any thoughts on this?

Anyone building (or built) something like this?

Appreciate it…
Al

#3

I will be building something similar in my app soon.
You can just use a workflow. Create an action and select under element actions “scroll to” and select the element you want to scroll to. You could also add conditions or otherwise make the action more dynamic.

#4

Interesting thinking, will give this a look. Thanks @robert!

#5

Scrollspy plugin should be helpful to solve it. Check the demo link, It looks very similar to your task

Plugin page: https://bubble.io/plugin/scrollspy-1610326820506x757120895346278400
Demo: https://scrollspy.bubbleapps.io/