dynamic-toc

(function(){function s(){var p=document.getElementById('trackerPageContent'),l=document.getElementById('trackerList');if(!p||!l)return;var h=[],ci=-1,t,mo=0;function ck(){var ph=Math.max(document.documentElement.scrollHeight||0,document.body.scrollHeight||0);if(ph<1500)return 0;c();return h.length>=3}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})}}function gt(e){return e.getBoundingClientRect().top+window.pageYOffset}function fc(){if(!h.length)return 0;var sp=window.pageYOffset,vh=window.innerHeight,ph=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);if(sp+vh>=ph-100)return h.length-1;var tp=sp+(vh*0.35);for(var i=h.length-1;i>=0;i--){if(tp>=gt(h[i].el))return i}return 0}function r(){l.innerHTML='';if(!h.length)return;var st=Math.max(0,ci-2),en=Math.min(h.length-1,ci+2);for(var i=st;i<=en;i++){var it=document.createElement('div');it.className='tracker-item';if(i===ci)it.className+=' current';else if(Math.abs(i-ci)===1)it.className+=' near';else it.className+=' far';it.textContent=h[i].text;l.appendChild(it)}}function u(){var x=fc();if(x!==ci){ci=x;r()}}function ini(){if(!ck()){p.style.display='none';return}p.style.opacity='1';ci=fc();r();window.addEventListener('scroll',function(){clearTimeout(t);t=setTimeout(u,80)});var m=document.querySelector('.menu-toggle-icon');if(m)m.addEventListener('click',function(){mo=!mo;p.style.bottom=(mo?300:110)+'px'})}setTimeout(ini,1000)}if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',s);else 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}