Skip to content

Enabling toc.sticky while setting globaltoc_collapse to True leads to overlapping / disappearing items in global TOC / left sidebar #461

Description

@ani-per

The conditional section of index.ts when toc.sticky is enabled, which was added 3 years ago, seems to be out of date with the latest codebase.

/* sphinx-immaterial: sticky toc headings */
if (feature("toc.sticky")) {
watchElementSize(document.body).pipe(distinctUntilKeyChanged("width"),
debounceTime(0)).subscribe(() => {
// The `position: sticky` CSS feature by itself is
// sufficient to enable a single level of "sticky" headings.
// To display multiple levels of sticky headings, it is
// necessary to specify a `top` position for each nested
// heading that is exactly the sum of the heights of the
// ancestor headings. For fixed-height headings that can be
// done statically, but this theme wraps long titles.
// Therefore, we must use JavaScript to compute the
// necessary top positions for each heading.
const existingHeights = new Map<HTMLElement, {height: string, zindex: number}>()
const heightProperty = "--md-nav__header-height"
for (const link of getElements(".md-nav__link", el)) {
const nav = link.nextElementSibling
if (!(nav instanceof HTMLElement) || nav.tagName !== "NAV") {
continue
}
let heightStr = ""
let zindex = NaN
const parentNav = nav.parentElement!.closest("nav")
if (parentNav !== null) {
const info = existingHeights.get(parentNav)
if (info !== undefined) {
heightStr = `${info.height} + `
zindex = info.zindex - 1
}
}
if (isNaN(zindex)) {
zindex = 100
}
heightStr += `${link.offsetHeight}px + 0.625em`
link.classList.add("md-nav__sticky")
link.style.setProperty("--md-nav__sticky-zindex", zindex.toString())
nav.style.setProperty(heightProperty, `calc(${heightStr})`)
existingHeights.set(nav, {height: heightStr, zindex})
}
})
}

See the following example when toc.sticky and globaltoc_collapse are enabled - the TOC headers obscure their first child entirely (see "Officers" heading) and overlap the next header (see "Sets" heading):

Image

Inspecting the TOC headers ("Officers", "Sets") and disabling the --md-nav__sticky-zindex and --md-nav__header-height properties set by lines 417 and 418 fixes the issue, even when scrolling:

Image

Hence I'm guessing that removing lines 417 and 418 would be enough to fix this issue:

link.style.setProperty("--md-nav__sticky-zindex", zindex.toString())
nav.style.setProperty(heightProperty, `calc(${heightStr})`)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: ToCRelated to Table of Contentsfeat: upstreama feature that exists upstream but is not well supported in sphinx-immaterial

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions