Notion floating Table of Contents

This custom code snippet adds a floating Table of Contents to a Super site.

It is useful for long pages where visitors need an easier way to move between sections. The snippet detects the headings already added to the Notion page and turns them into a small floating navigation menu.

On desktop, visitors can hover over the floating control to open the Table of Contents. They can then click a heading to move directly to that section.

On mobile, the Table of Contents appears as a small floating button. Visitors can tap the button to open it, then select a heading. After a heading is selected, the menu closes automatically.

Recommended Notion setup

For best results, structure your Notion page using heading blocks.

Supported heading levels:

• Heading 1
• Heading 2
• Heading 3
• Heading 4

Try to use clear and short heading names. This makes the floating Table of Contents easier to read and use.

The page should have at least 2 heading blocks. If the page has fewer than 2 headings, the floating Table of Contents will not appear.

Installation instructions

1. Open your site in the Super Dashboard.
2. Open the Code page.
3. If you want the Table of Contents to appear across the whole site, add the code at the site level.
4. If you only want the Table of Contents to appear on one page, add the code at the page level.
5. In the Head tab, paste the CSS snippet for the floating Table of Contents.
Copy

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/Floating-TOC/floating-v2.css">

6. In the Body tab, paste the JavaScript snippet for the floating Table of Contents.
Copy

<script src="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/Floating-TOC
/floating-v2.js"></script>

7. Save your changes.
8. Open your live Super site and refresh the page.

Optional style customization

You can customize the appearance of the floating Table of Contents by editing the CSS variables.

:root {
--floating-toc-right: clamp(16px, 3.5vw, 64px);
--floating-toc-panel-width: clamp(220px, 20vw, 292px);
--floating-toc-panel-bg: #ffffff;
--floating-toc-panel-radius: 14px;
--floating-toc-active-color: #2f7de1;
--floating-toc-active-bg: rgba(55, 53, 47, 0.08);
--floating-toc-heading-highlight-bg: rgba(47, 125, 225, 0.14);
--floating-toc-scroll-offset: 96px;
}

Example:

If the page scrolls too high or too low after clicking a Table of Contents item, you can adjust the scroll offset.

:root {
--floating-toc-scroll-offset: 96px;
}

Mobile behavior

On desktop, the floating Table of Contents opens on hover.

On mobile, it appears as a small floating button near the bottom-right corner of the screen. Visitors can tap the button to open the Table of Contents.

The mobile layout is included in the CSS and starts at smaller screen sizes.

Notes and limitations

• The floating Table of Contents only works with headings already rendered on the page and does not create new headings or change your Notion content.
• If the page does not have supported heading blocks, the floating Table of Contents may not appear.
• Very long heading text may wrap inside the floating Table of Contents panel.
• The snippet works best on pages with a clear heading structure.
• Sites with custom navbars, sidebars, large page covers, or layout-related custom code may need extra testing for alignment.
• Sites with heavy third-party scripts or advanced custom code may need extra testing to make sure the Table of Contents loads correctly.

Troubleshooting

• If the floating Table of Contents does not appear, make sure the page has supported heading blocks.
• If the Table of Contents appears but does not open, check that the JavaScript snippet was added correctly in the Body tab.
• If the Table of Contents opens but does not scroll to the correct section, refresh the live site and test again.
• If the selected heading is hidden behind the navbar, increase the -floating-toc-scroll-offset value.
• If the design does not look correct, check whether other custom CSS is overriding the floating Table of Contents styles.
• If the issue only happens on one page, test the code on a simple page with a few headings to confirm whether the issue is related to the page structure or another custom code snippet.