This was done using a ‘single page’ template and applying it to the pages where I want the sidebar to float.  It is set to automatically pick up headers with style H2

• Go to Templates > Theme Builder from WordPress and see ‘Service Page Sidebar’
• Note that you can click ‘Edit Conditions’ here to designate what pages it applies to
• If you edit the page you will see lots of HTML on the left, and two sections in the page.  It isn’t obvious how they were built, so:
  • Process:  WordPress > Templates > Theme Builder > Add New > Single Page
  • Create a section, full width, with two containers (flexbox), one above the other
  • Top container gets a ‘Post Content’ widget
  • Top container also gets an HTML widget, under ‘Post Content’
  • Bottom container gets a “Table of Contents’ widget
  • Top container:
    • Click ‘Advanced’ and set CSS Classes to “services-frame” (no quotes)
    • ^^ this is referenced in HTML widget, see next few steps
    • HTML widget gets a ton of code.  See below for what it was initially set to in Services-Pathology
  • Table of Contents widget has settings.  I won’t go into all the detail here, but it is editable.  Font size, bullets, etc.  Some of it can be done in that HTML widget. Be careful.

Important Notes:

• When you come back to edit the template, the Table Of Contents widget does not appear!  Which makes it hard to edit.  To find it, right click on a container in the page and select ‘Structure’ then look for it within the container.  If you click ‘Table of Contents’ in the Structure popup the widget settings appear on the left.
• This only gets applied to pages that are specified in the template
• The TOC will not appear if you do not set CSS Classes to ‘toc-float’ (no quotes) within the TOC widget on the Single Page template.
• This does not work if HERO section is not tagged!  
  • Go the the services page you want this to appear on and select the entire hero Container (look to top left for square icon to select it), then Advanced > CSS Classes > add hero (just the 4 letters)
• The TOC is set to appear when you scroll past the hero section.  You must use the html widget to adjust where this happens, depending on the height of the header/hero section for the page.
  •  const REVEAL_EARLY = 100 in the html on the Service Page Sidebar (in WordPress > Templates > Theme Builder > Single Page > {page name that is applied to the services page, in this case ‘Service Page Sidebar} controls how high/low the TOC starts on the page.
  • –header-offset: 220px in the same html code as the above bullet tells the page how much to adjust for the header height.
  • If you have two pages you want to apply this to, and they have different heights for hero section then you must create another template.  Where the TOC appears is set in the template html, as referenced in the above 2 bullet points, and is static.

HTML Code for ‘Services Page Sidebar’ as of 2025-08-27 (note the ‘header offset’ ):

<style>

/* Scope everything to this page’s template */

.services-frame{

  –header-offset: 170px;  /* tweak as needed */

  –hero-max: 326px;      /* your hero max height */

  –toc-gap: 16px;

}

/* floating TOC */

.services-frame .toc-float{

  position: fixed;

  top: calc(var(–header-offset) + var(–hero-max) + var(–toc-gap));

  left: 32px;

  width: 280px;

  max-height: calc(100vh – var(–header-offset) – 2*var(–toc-gap));

  overflow: auto;

  z-index: 999;

  opacity: 0;

  pointer-events: none;

  transition: top .2s ease, opacity .2s ease;

}

/* dock under header once hero is out of view */

.services-frame .toc-float.is-visible{

  top: var(–header-offset);

  opacity: 1;

  pointer-events: auto;

}

/* anchor offset for jumps */

.services-frame [id]{ scroll-margin-top: var(–header-offset); }

/* hide TOC on smaller screens */

@media (max-width: 1024px){

  .services-frame .toc-float{ display:none; }

}

</style>

<script>

document.addEventListener(‘DOMContentLoaded’, () => {

  const root = document.querySelector(‘.services-frame’);

  const toc  = root && root.querySelector(‘.toc-float’);

  if (!root || !toc) return;

  // Prefer a .hero section; fallback to the first Elementor section inside Post Content

  const hero = document.querySelector(‘.hero’) || document.querySelector(‘.elementor-section’);

  if (!hero) { toc.classList.add(‘is-visible’); return; }

  const io = new IntersectionObserver(([entry]) => {

    if (!entry.isIntersecting) toc.classList.add(‘is-visible’);

    else toc.classList.remove(‘is-visible’);

  }, { threshold: 0.01 });

  io.observe(hero);

});

</script>