Squarespace 7.1 — Sticky TOC Plugin

Just copy/paste this code into a new code block on any page/post.

*NOTE:

This won’t work properly if using another TOC plugin
This won’t show properly (on desktop) if using a custom sidebar in your site CSS
Check out the instructions below for information on edits and troubleshooting

📜 Sticky Table of Contents for Squarespace

Copy and paste this into a Code Block inside your Squarespace site. This will create a sticky table of contents that appears when scrolling down the page.

<!-- 🚀 Sticky Table of Contents Plugin -->
<div id="toc-container">
  <style>
    /* RESET: default to visible */
    #toc-box {
      display: block;
    }

    /* Desktop TOC styles */
    @media screen and (min-width: 1025px) {
      #toc-box {
        position: fixed;
        top: 140px;
        left: 10px;
        width: 180px;
        background: #ffffff;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 0.75em;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        z-index: 999;
        max-height: 60vh;
        overflow-y: auto;
        font-family: sans-serif;
        font-size: 12px;
        line-height: 1.4;
        display: none; /* JS toggles this only on desktop */
      }

      #toc-box ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      #toc-box li {
        margin: 3px 0;
      }

      #toc-box a {
        text-decoration: none;
        color: #0070f3;
        display: block;
      }

      #toc-box a:hover {
        text-decoration: underline;
      }

      .toc-h2 a {
        padding-left: 0.25em;
      }

      .toc-h3 a {
        padding-left: 1.25em;
        font-size: 11px;
      }
    }

    /* Mobile TOC styles */
    @media screen and (max-width: 1024px) {
      #toc-box {
        position: relative;
        margin: 1em auto;
        width: 90%;
        background: #ffffff;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 0.75em;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        font-family: sans-serif;
        font-size: 13px;
        line-height: 1.4;
        max-height: none;
      }

      #toc-box ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      #toc-box li {
        margin: 5px 0;
      }

      #toc-box a {
        text-decoration: none;
        color: #0070f3;
        display: block;
      }

      #toc-box a:hover {
        text-decoration: underline;
      }

      .toc-h2 a {
        padding-left: 0.5em;
      }

      .toc-h3 a {
        padding-left: 1.5em;
        font-size: 12px;
      }
    }
  </style>

  <div id="toc-box">
    <ul id="toc-list"></ul>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const htmlBlocks = document.querySelectorAll('.sqs-block-html');
      const tocList = document.getElementById("toc-list");
      const tocBox = document.getElementById("toc-box");
      let headings = [];

      htmlBlocks.forEach(block => {
        const hTags = block.querySelectorAll("h2, h3");
        hTags.forEach(h => headings.push(h));
      });

      headings.forEach((heading, i) => {
        const tag = heading.tagName.toLowerCase();
        const text = heading.textContent;
        const id = heading.id || `toc-heading-${i}`;
        heading.id = id;

        const li = document.createElement("li");
        li.classList.add(`toc-${tag}`);

        const a = document.createElement("a");
        a.href = `#${id}`;
        a.textContent = text;

        li.appendChild(a);
        tocList.appendChild(li);
      });

      // DESKTOP scroll detection only
      function handleScroll() {
        if (window.innerWidth > 1024) {
          if (window.scrollY > 150) {
            tocBox.style.display = "block";
          } else {
            tocBox.style.display = "none";
          }
        }
      }

      // Attach scroll event for desktop only
      if (window.innerWidth > 1024) {
        tocBox.style.display = "none"; // start hidden on desktop
        window.addEventListener("scroll", handleScroll);
      }
    });
  </script>
</div>

Looking for something else?

Check out my other TOC plugins:

H2-only TOC

H2 + H3 TOC

📌 Squarespace Sticky Table of Contents Plugin – Quick Start Guide

This plugin creates a floating sticky table of contents on your Squarespace blog post, showing your H2s and H3s in a sleek, clickable format. It only appears after scrolling down the page.

On mobile, it stays at the top.

You can customize it easily with the tips below 👇

🧠 How to Add It

Edit your blog post.
Add a Code Block anywhere in the main content area.
Paste the entire TOC plugin code inside it.
Save & preview your post — scroll down and voilà!

🎨 Customize the Plugin

🔹 1. Change the Link Color

Want the links to match your site’s color scheme?

Find this line in the code:

css

CopyEdit

#toc-box a { color: #0070f3; }

Replace #0070f3 with any color you like (Hex, RGB, or blue, hotpink, etc.).

🔹 2. Push the TOC Box Further Down

Is your sticky header overlapping the TOC box?

Find this line:

css

CopyEdit

top: 140px;

Increase that number (e.g. top: 180px;) to push the box further down.

🔹 3. Adjust the Alignment

Want to nudge the box away from the edge or float it right instead?

Find this line:

css

CopyEdit

left: 10px;

To move it more inward, increase the number.
To align it to the right instead, change it to:

css

CopyEdit

right: 10px; left: auto;

🛠️ Optional: Tweak the Box Width

If you want a slightly wider or skinnier box, change:

css

CopyEdit

width: 180px;

Try 160px for a tighter look or 200px if your headings are long.

⚠️ Troubleshooting

If the TOC overlaps your blog post content:

Hover near the blog content area in Squarespace Editor.
Click Edit Section.
Scroll to Content Width → choose Custom.
Adjust the width until there's enough space for your TOC box to float beside your content.

🙌 That’s It!

Once it's set up, your readers can easily jump to any section of your blog. Great for SEO, UX, and longer-form guides.