dynamic-toc

!function(){console.log("=== TRACKER V3 START ===");function s(){var p=document.getElementById("trackerPageContent"),l=document.getElementById("trackerList");if(!p||!l)return void console.error("TRACKER: Elemente fehlen");console.log("TRACKER: Elemente OK");var h=[],ci=-1,t,mo=0;function ck(){var ph=Math.max(document.documentElement.scrollHeight||0,document.body.scrollHeight||0);return console.log("TRACKER: Hoehe="+ph+"px"),ph<1500?(console.log("TRACKER: Zu kurz"),0):(c(),console.log("TRACKER: "+h.length+" Headings"),h.length<3?(console.log("TRACKER: Zu wenig"),0):1)}function c(){var a=document.querySelectorAll("h2,h3,h4");h=[];for(var i=0;i<a.length;i++)h.push({el:a[i],text:(a[i].textContent||a[i].innerText).substring(0,50)});console.log("TRACKER: Liste:");for(var j=0;j<Math.min(5,h.length);j++)console.log("  ["+j+"] "+h[j].text)}function gt(e){return e.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop)}function fc(){if(!h.length)return 0;var sp=window.pageYOffset||document.documentElement.scrollTop,vh=window.innerHeight,ph=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);if(sp+vh>=ph-100)return h.length-1;for(var tp=sp+.35*vh,i=h.length-1;i>=0;i--)if(tp>=gt(h[i].el))return i;return 0}function r(){l.innerHTML="";if(h.length){for(var st=Math.max(0,ci-2),en=Math.min(h.length-1,ci+2),i=st;i<=en;i++){var it=document.createElement("div");it.className="tracker-item",i===ci?it.className+=" current":1===Math.abs(i-ci)?it.className+=" near":it.className+=" far",it.textContent=h[i].text,l.appendChild(it)}console.log("TRACKER: Render Index="+ci+" ("+h[ci].text.substring(0,30)+")")}}var scrollCnt=0;function u(){scrollCnt++,scrollCnt%10==0&&console.log("TRACKER: Scroll #"+scrollCnt);var x=fc();x!==ci&&(console.log("TRACKER: "+ci+" zu "+x),ci=x,r())}function ini(){if(console.log("TRACKER: Init..."),!ck())return p.style.display="none",void console.log("TRACKER: DEAKTIVIERT");console.log("TRACKER: *** AKTIV ***"),p.style.opacity="1",ci=fc(),console.log("TRACKER: Start Index="+ci),r(),console.log("TRACKER: Attach Scroll..."),window.addEventListener("scroll",function(){clearTimeout(t),t=setTimeout(u,80)},!1),console.log("TRACKER: Scroll OK");var m=document.querySelector(".menu-toggle-icon");m?(m.addEventListener("click",function(){mo=!mo,p.style.bottom=(mo?300:110)+"px",console.log("TRACKER: Menu="+p.style.bottom)},!1),console.log("TRACKER: Menu OK")):console.log("TRACKER: Kein Menu"),console.log("TRACKER: Init fertig")}console.log("TRACKER: Start in 1500ms..."),setTimeout(ini,1500)}"loading"===document.readyState?(console.log("TRACKER: Warte DOM..."),document.addEventListener("DOMContentLoaded",s)):(console.log("TRACKER: DOM ready"),s())}();

<div id="trackerPageContent"><div class="tracker-list" id="trackerList"></div></div>

#trackerPageContent{position:fixed;bottom:110px;left:20px;width:250px;z-index:2147483000;pointer-events:none;opacity:0;transition:bottom .3s,opacity .4s}.tracker-list{display:flex;flex-direction:column;gap:6px}.tracker-item{line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .25s}.tracker-item.current{font-size:22px;font-weight:600;color:#06C}.tracker-item.near{font-size:16px;color:#777}.tracker-item.far{font-size:14px;color:#999}