Skip to content
duxt

useActiveHeading()

The heading currently in view.

Signature

const active = useActiveHeading(ids);

Returns

The id of the heading the reader is currently at.

Notes

It watches the headings rather than the scroll offset, so a short last section is still reported as reached — the common failure of a scroll-position table of contents.

A heading becomes active once its top has passed a line below the viewport top. That line is the heading's own scroll-margin-top — exactly where a click in the table of contents parks it, whatever sticky header sits above the page at that width — and never higher than duxt.toc.scrollOffset. Raise the offset when a consumer adds fixed UI above the document that the headings' scroll margin does not account for; it is independent of toc.depth, which decides which headings enter the table of contents at all.

Was this page helpful?