https://digitalyieldgroup.com/blog/wp-content/themes/dylblog-child/js/posts-anchor.js

1document.addEventListener("DOMContentLoaded", function () {
2  console.log("TOC init");
3
4  const tocList = document.getElementById("toc-list");
5  const tocContainer = document.querySelector(".single-contents-table-container");
6  const mainContainer = document.querySelector(".single-main-container");
7  const iconTemplate = document.getElementById("68");
8
9  if (!tocList || !tocContainer || !mainContainer) return;
10
11  const headings = document.querySelectorAll("h2");
12  let hasValidHeadings = false;
13
14  headings.forEach((heading, index) => {
15    const headingText = heading.textContent.trim().toLowerCase();
16    if (headingText === "post navigation") return;
17
18    if (!heading.id) heading.id = "section-" + (index + 1);
19
20    const li = document.createElement("li");
21
22    if (iconTemplate) {
23      const icon = iconTemplate.cloneNode(true);
24      icon.removeAttribute("id");
25      icon.style.display = "inline-block";
26      li.appendChild(icon);
27    }
28
29    const a = document.createElement("a");
30    a.href = `#${heading.id}`;
31    a.textContent = heading.textContent;
32
33    li.appendChild(a);
34    tocList.appendChild(li);
35    hasValidHeadings = true;
36  });
37
38  if (!hasValidHeadings) {
39    tocContainer.style.display = "none";
40    return;
41  }
42
43  // Sticky Scroll Logic
44  const observerTarget = document.createElement("div");
45  tocContainer.parentElement.insertBefore(observerTarget, tocContainer);
46
47  const observer = new IntersectionObserver(
48    ([entry]) => {
49      const isDesktop = window.innerWidth > 960;
50      if (!isDesktop) {
51        tocContainer.classList.remove("is-sticky");
52        tocContainer.style.left = "";
53        return;
54      }
55
56      if (!entry.isIntersecting) {
57        tocContainer.classList.add("is-sticky");
58        const leftOffset = mainContainer.getBoundingClientRect().left + window.scrollX;
59        tocContainer.style.left = `${leftOffset}px`;
60      } else {
61        tocContainer.classList.remove("is-sticky");
62        tocContainer.style.left = "";
63      }
64    },
65    {
66      rootMargin: "0px",
67      threshold: 0,
68    }
69  );
70
71  observer.observe(observerTarget);
72});
73