Scrollspy w przewodniku po mieście

<main class="guide"><header><h1>Spacer<br>po mieście.</h1><p>Trzy przystanki<br>przykładowej trasy.</p></header><div class="guide-body"><nav aria-label="Przystanki spaceru"><button data-section="market" aria-current="location"><span>01</span> Rynek</button><button data-section="river"><span>02</span> Nad rzeką</button><button data-section="garden"><span>03</span> Ogród</button><p id="spy-status" class="status" aria-live="polite">Teraz: Rynek</p></nav><div id="guide-scroll" tabindex="0" aria-label="Przewijalny przewodnik"><section id="market"><span>Przystanek 01</span><h2>Rynek</h2><p>Plac otoczony kamienicami i ulicami starego miasta.</p><div class="cityline" aria-hidden="true"><i></i><i></i><i></i><i></i></div></section><section id="river"><span>Przystanek 02</span><h2>Nad rzeką</h2><p>Trasa wzdłuż rzeki, mostów i nabrzeży.</p><div class="riverline" aria-hidden="true"></div></section><section id="garden"><span>Przystanek 03</span><h2>Ogród</h2><p>Ogród z miejscem na odpoczynek.</p><div class="gardenline" aria-hidden="true"><i></i><i></i><i></i></div></section></div></div></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;color:var(--ink,#15202b);background:var(--paper,#fff);line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;min-height:44px}button:disabled{cursor:not-allowed;opacity:.55}button,input,select,a{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#1368ce);outline-offset:4px}button{border-radius:0}h1,h2,p{margin-top:0}svg{display:block;max-width:100%}[hidden]{display:none!important}.status{min-height:24px;font-size:14px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body{--paper:#f2dfbd;--ink:#683e29;--focus:#18657a}.guide{max-width:850px;margin:auto;padding:30px}header{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:20px;border-bottom:2px solid #683e29}h1{font:43px/1.02 Georgia,serif;margin:0}header p{font-size:14px;margin:0}.guide-body{display:grid;grid-template-columns:185px 1fr;gap:24px;margin-top:20px}nav button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px 10px;background:none;border:0;border-bottom:1px solid #c6a37d;color:#683e29;font-size:14px}nav button span{font:12px monospace;color:#795035}nav button[aria-current]{background:#683e29;color:#fff1d8}nav button[aria-current] span{color:#fff1d8}#guide-scroll{height:288px;overflow:auto;scroll-behavior:smooth;scroll-padding-top:0;background:#faf0dc;border:1px solid #c6a37d}section{padding:25px;min-height:288px;border-bottom:1px solid #c6a37d}section>span{font:12px monospace;color:#795035}h2{font-size:31px;margin:9px 0}section p{font-size:14px;max-width:410px}.cityline{display:flex;gap:8px;align-items:flex-end;height:55px}.cityline i{display:block;background:#c6875a;width:52px;height:40px}.cityline i:nth-child(2){height:55px}.cityline i:nth-child(3){height:30px}.riverline{height:45px;background:repeating-linear-gradient(0deg,#c2d6d1 0 8px,#789f9b 8px 11px);border-top:6px solid #8a6956}.gardenline{display:flex;gap:18px;padding-top:8px}.gardenline i{width:38px;height:48px;display:block;background:#8c9d69;border-radius:50% 50% 0 0;transform:rotate(12deg)}.status{font-size:12px;margin-top:16px}@media(max-width:480px){.guide{padding:22px}h1{font-size:36px}header p{font-size:12px;max-width:110px}.guide-body{grid-template-columns:1fr;gap:12px}nav{display:flex;flex-wrap:wrap;gap:5px}nav button{flex:1;width:auto;justify-content:center;gap:5px;font-size:12px;padding:9px 4px}nav .status{width:100%;margin:4px 0}#guide-scroll{height:270px}section{padding:20px;min-height:270px}}

(()=>{
const root=document.querySelector('#guide-scroll'),buttons=[...document.querySelectorAll('[data-section]')],sections=[...root.querySelectorAll('section')];function mark(id){buttons.forEach(b=>{b.removeAttribute('aria-current');if(b.dataset.section===id)b.setAttribute('aria-current','location');});document.querySelector('#spy-status').textContent='Teraz: '+document.querySelector('#'+id+' h2').textContent;}buttons.forEach(button=>button.addEventListener('click',()=>{const section=document.querySelector('#'+button.dataset.section);root.scrollTo({top:section.offsetTop-root.firstElementChild.offsetTop,behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'instant':'smooth'});mark(section.id);}));const observer=new IntersectionObserver(entries=>{const visible=entries.filter(e=>e.isIntersecting).sort((a,b)=>b.intersectionRatio-a.intersectionRatio);if(visible[0])mark(visible[0].target.id);},{root,threshold:[.35,.6]});sections.forEach(section=>observer.observe(section));
})();