I'm currently working on a project with Nextjs and Prismic
From Prismic, I'm fetching an array of slices, which includes the navigation slice and the section slices.
I'd like to implement a full-width horizontal nav bar that starts halfway down the page, sticks to the top and automatically updates to show which section is the currently 'active' section.
Here is an example of what I mean: https://getbootstrap.com/docs/4.0/components/scrollspy/
I've built the nav bar and made it stick to the top, but am now struggling to update it with the active section.
Because each of the sections are slices, it's not possible for me use the useRef hook and get the 'ref' out of the slice and up to the page level.
An alternative I've considered is using querySelectors at the page level and using the onscroll event handler to update the class of the 'active' section. It feels a little bit hacky and I'm a little unsure of exactly how to implement it, but it's the only solution I can think of.
Could anyone please help with this?
