How to use Intersection Observer to only change on next heading?

Well there is a base example is here (not mine):

The problem is not quite exact, for example if there’s a heading and then a text, the idea is that only when the text of a heading is completely offscreen, then detect the next heading as the current one in the table of contents…

In the image above it should detect “setup” instead of “Javascript”

should be easy enough.
Instead of having id’s on headings have the id’s in the paragraphs instead.
I noticed that some sections have multiple paragraphs.

What I would do is to create a new element let’s say for setup

<section id='setup'>
<h1> Setup </h1>
  <p> .... </p>
  <p> .... </p>
</section>
... etc

Probably the logic inside needs to be amended a bit handleObserver to work with this case.

Thanks, well creating sections would just create me other problemas alongised the extra manual work so I’m afriad is not feasible. I’m wondering what about observing p elements as well, but only if no headings are intersecting? and then look for the closest heading of this paragraph?

some of your headings may have 1 or more paragraphs underneath, programmatically you need to have some detectable boundaries.
The current boundaries are the heading elements with the ids set.

Think I managed a workaround, try this mate

Let me know what you think.

It’s not a good final solution but gives an idea of how to play with the boundaries.

1 Like

Thank youuu!!! I’m checking it, seems to work fine i’d only replace ids by classes though but looks like a good start :wink:

that should work, using classes so is not messing up the href’s from the menu on click.
I am too exhausted today to dig deeper but I am almost sure there is a better way to handle this.

1 Like

@Snippet please check this out Scrollspy · Bootstrap v5.0

You may use bootstrap for your case or have a look at how they’ve implemented it.
This example below looks more like what you want to do

scroll spy with nested menu

This should save a lot of time :smiley:

1 Like

I do use Bootstrap 5 niice had no idea seems very cool