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

JavaScript
1

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”

2

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.

3

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?

4

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.

5

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
6

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:

7

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
8

@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
9

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

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.