Svelte ToC

The hideOnIntersect Feature

This page demonstrates how the hideOnIntersect prop automatically hides the table of contents when it would overlap with full-width elements like hero sections, banners, or images. Scroll down to see the TOC disappear and reappear.

Watch the TOC on the right side of the screen. As you scroll through this page, it will hide when you reach a full-width banner, then reappear when you scroll past it.

Why This Matters

Fixed or sticky sidebars can clash visually with full-width content that's designed to span the entire viewport. The hideOnIntersect prop solves this by temporarily hiding the TOC when such elements scroll into its space.

This is useful for documentation with hero sections, image galleries, or any layout that mixes sidebar navigation with full-bleed content.

How It Works

Pass a CSS selector or array of elements to hideOnIntersect. The component checks on every scroll event whether any matching element's bounding box overlaps with the TOC. When overlap is detected, the TOC gracefully hides.

Usage Example

<Toc hideOnIntersect=".full-width-banner" />

<!-- Or with multiple selectors -->
<Toc hideOnIntersect=".hero, .full-width-image" />

Desktop Only

This feature only activates on desktop viewports. On mobile, the TOC appears as a compact button that doesn't interfere with full-width layouts, so intersection detection is unnecessary.

The breakpoint for desktop/mobile is controlled by the breakpoint prop, which defaults to 1000px.

Performance Considerations

The overlap detection uses getBoundingClientRect() which is called on scroll. For most pages with a handful of full-width elements, this is negligible. The check short-circuits early if hideOnIntersect is not set.

The implementation uses a simple AABB (axis-aligned bounding box) collision test, which is one of the fastest intersection algorithms available.

Accessibility

When hidden by intersection, the TOC sets aria-hidden="true" so screen readers skip the temporarily hidden content. Visibility is controlled via CSS (opacity: 0, pointer-events: none) to enable smooth fade transitions while keeping the element in the layout flow.

This approach is preferred over using the hidden attribute or removing the element from the DOM, as it maintains layout stability and allows for smooth animations.

Edge Cases Handled

• Empty selector (no elements match) — TOC stays visible
• Elements added dynamically — re-checked on DOM mutations
• Window resize — overlap recalculated
• Multiple overlapping elements — hides if any overlap

The feature is designed to be robust and handle real-world scenarios where content may change dynamically or the viewport may be resized.

Implementation Details

The overlap check runs on every scroll event, but only when hideOnIntersect is set. The check compares the bounding rectangles of the TOC and each target element.

Two rectangles overlap if and only if they overlap on both axes. The code uses the inverse check: rectangles do NOT overlap if one is completely to the left, right, above, or below the other.

Try It Yourself

Scroll up and down this page and watch the TOC in the corner. It will hide whenever one of the colorful full-width sections enters its space, then smoothly reappear when you scroll past.

Try resizing the browser window to see how the feature responds. On mobile widths, the TOC becomes a button and the intersection hiding is disabled.

Summary

The hideOnIntersect prop provides a clean solution for pages that need both a sticky table of contents and full-width visual elements. It's performant, accessible, and handles edge cases gracefully.