Scrolling interaction in one div change tab in adjacent div block

Design help Animations & Interactions
1

Hey folks,

I am making a custom report that has a toggle button to open a documentation panel that will update (or change tabs) as the corresponding content appears on the screen.

Specifically, I’m wondering if it’s possible to change tabs in ‘documentation-tabs’ when the ‘data-content’ div is scrolled. I’m attaching my public link for reference :slight_smile:

Thanks!

Brian

Here is my public share link:

https://preview.webflow.com/preview/workinsights-alpha?utm_medium=preview_link&utm_source=dashboard&utm_content=workinsights-alpha&preview=e58b47e56a5fbb9543c355e3c9235097&pageId=62d5931e8533b4ba4854e9a1&workflow=preview

2

Hi @brianstever If I understand correctly you are trying create TOC (Table Of Content). You can find on this forum many already solved requests with identical question or a few step by step tutorials created by forum members. Feel free to use forum search input field and use keyword eg. table of content

https://discourse.webflow.com/search?q=table%20of%20content

3

Hi Stan,

Thanks for your reply but I’ve already set up the TOC. What I’d really like to know is if it’s possible to set up a custom scroll interaction that can change tabs in a tabs menu.

4

Hi @brianstever It will be nice to mention what research you have done on your own and what is not working for you or you do not understand as there is many ways to achieve identical result. As eg. you can create your ToC dynamically instead to creating it manually etc. all depense on your needs.

You will need a custom code for it and in link I have posted there are a few tutorials how to or use Finsweet library to do that.

5

Hi Stan,

I’m not sure if you understand my question. I’m not talking about the TOC, I’m asking if it’s possible to connect the scroll position of say, ‘div block x’ to changing tabs in a tabs menu contained in say ‘div block y’