active-toc
v1.0.3
Published
Highlight your toc entries while scrolling
Downloads
88
Readme
Table of Contents
ActiveToc
Make your table of contents (toc) active.
Please visit ulf.codes/tools/active-toc to see ActiveToc in action or download the GitHub repo and open the file index.html to see the usage.
Embed the script active-toc.min.js in your web page.
ActiveToc is using the IntersectionObserver API.
init
Without defining the toc container a call like ActiveToc.init() will search for an element with id="header" or a header tag and will make that element the container for the active toc. The container has to hold a set of links to headings (h2, h3, h4, h5, h6) inside of the document. Each heading needs to be identified with the id attribute. When scrolling contents or resizing the window, the links in the tocContainer will be assigned a combination of the CSS classes
Parameters
settings
(string | Object)? – Optional: Can be empty, a String, or a settings object. A String will be interpreted as a selector for the toc container. A settings object must contain a tocContainer property that will store the selector for the toc container.settings.tocContainer
string? Optional: Specify the selector of the container that holds the links to the headings inside of your document. Default id is #header. If not specified the first html header tag will be used.settings.headless
boolean Optional: If true, headings are processed without an associated tocContainer (optional, defaultfalse
)settings.intersectionOptions
IntersectionOptions? Optional: The Intersection observer options as defined by the intersection observer APIsettings.onVisible
function (Object, Object)? Optional: A function that will be called when an element receives visible status. The toc entry that received visible status (null if the entry doesn´t exist) and the associated heading will be passed as arguments into the function.settings.onActive
function (Object, Object)? Optional: A function that will be called when an element receives active status. The toc entry that received active status (null if the entry doesn´t exist) and the associated heading will be passed as arguments into the function.settings.onHighlight
function (Object, Object)? Optional: A function that will be called when an element receives highlight status. The toc entry that received visible status (null if the entry doesn´t exit) and the associated heading will be passed as arguments into the function.settings.offHighlight
function ()? Optional: A function that will be called when a highlighted element looses the highlight status and no new highlighted element is available.
destroy
Revert all changes that have been made by ActiveToc
unobserve
Do no longer observe the headings of the document