Is there a way to hold the "active" class until the next anchored element is come to visible?

[web86]

I am making a sticky table of contents in the sidebar that is generated based on the heading tags (h3) of the article. The article cannot be divided into blocks, so when I scrolling, the "active" class is added according its heading tag, but since the heading tag's height is small, it immediately disappears.

The article's content is like this:

<h3 id="anchor1">Title 1</h3>
<p>...</p>
<p>...</p>
<h3 id="anchor2">Title 2</h3>
<p>...</p>
<p>...</p>
<h3 id="anchor1">Title 2</h3>
<p>...</p>
<p>...</p>

So when tag h3 is going away from viewpoint the active class disappears. Is there a way to hold the "active" class until the next h3 is come to visible?

[fisshy]

I don't think theres any way to hodl the active class, but you could probably listen to the onSetActive and onSetInactive to come up with your own logic.

[AlexCernik]

with multiple link onSetActive and change state cause lag

[mathycoder]

I have a similar problem. I'm also using headers as my anchors. I am trying to use onSetActive so that I can then set the state to maintain an active status between header tags. However, onSetActive doesn't always trigger if I scroll past a header with any type of speed... most likely due to the small area of the header elements. @fisshy , is there any way to increase the size and/or the sensitivity of the onSetActive trigger event?

I'm exploring ways of adding a div to encapsulate the header and elements following it dynamically, but I'm wondering if react-scroll has some helpful feature already.

[fisshy]

@mathycoder You could probably adjust the offset to trigger the visibility earlier.

[mathycoder]

@fisshy I appreciate the suggestion. But that seems to just move the small trigger area up or down; it still gets missed often while scrolling. If the triggerable area could be made larger, that would probably solve the problem.