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!

6

I know this topic is pretty old but probably it still could be useful for someone as this is a comment task I always meet working with Bubble.

I created a plugin that could help you to solve this kind of tasks!

It detects which elements are currently visible on the screen, triggers an event when an item becomes visible and provides you an Element ID or a Repeating Group item index.

It can be particularly useful to highlight menu items, Table of Content items (Scrollspy feature), animate items on scroll, show / hide items etc.

Some demos:
Demo 1: Element ID
Demo 2: Vertical RG
Demo 3: Horizontal RG

Plugin Page;