Split Screen Design: As I scroll to the 2nd/3rd/4th playbook, I want to highlight the corresponding "navigation" on the sidebar... How?

I have a split screen design for my web app. On the left we have a summary of each playbook. On the right we have all the playbooks displayed by order and user can scroll through all the playbooks.

How do I set it such that as I scroll to the second / third / fourth playbook etc, something is triggered so I can change the corresponding label in the left summary sidebar for that playbook, so the user knows which playbook he is viewing now?

Hello, I think you’d need to listen to scroll on each heading/section and highlight them based on each’s distance from the top of the scrollable containers. This usually is done in batch with JavaScript’s Intersection Observer API - Web APIs | MDN

I’m sorry that completely went over my head, having trouble understanding :frowning: Could you be more specific on how?

Yeah, it’s a little complex. Are the contents going to be dynamically generated? or is it statically built by you?

Yes! The contents are dynamically generated. It is basically fetching the playbooks from Xano, which is dynamic… (in the example above there was 2 but there could be more)

Hello, I recorded a video about how to use the scroll position, it seems like it’s doable even within WeWeb’s no-code capabilities.

Oh yes. I set it such that ypercent is >0 and <=100 - highlight the playbook - and it works like a charm.

1 Like