Is the header actually stuck? — scroll-state() vs IntersectionObserver

<div class="pg">
    <h1 class="pg-title">🎮 Is the header actually stuck?</h1>
    <p class="pg-sub">
      Drag the banner slider, pick a detection method, then scroll the box below.
      Watch <em>when</em> the header grows a shadow — and whether that moment still
      matches reality once the layout above it changes.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="seg" id="modeSeg" role="group" aria-label="Detection method">
        <button type="button" aria-pressed="true" data-mode="css"><code>scroll-state()</code> (new way)</button>
        <button type="button" aria-pressed="false" data-mode="js">IntersectionObserver (old way)</button>
      </div>
      <div class="field" style="margin-top: 14px">
        <label class="label" for="bannerH">Announcement banner height: <strong id="bannerHVal">64</strong>px</label>
        <input type="range" id="bannerH" min="16" max="96" step="8" value="64" />
      </div>
      <p class="hint" id="modeHint"></p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — scroll inside the box</div>
      <div class="demo-scroll" id="scrollBox">
        <div class="demo-banner" id="demoBanner">📣 Free shipping this week</div>
        <div class="intro">Scroll down — the product header below locks to the top once it passes under the banner.</div>
        <div class="sticky-wrap" id="stickyWrap">
          <div class="sticky-header" id="stickyHeader">
            <strong>Wireless headphones</strong>
            <span class="price">$42</span>
          </div>
        </div>
        <div class="filler">
          <p>Product description, specs, reviews — the usual page filling the scroll space beneath a sticky add-to-cart bar.</p>
          <p>Keep scrolling. The header above should only gain a drop shadow once it is genuinely pinned under the banner, not a moment before.</p>
          <p>Scroll back up and the shadow should disappear the instant it unsticks, too.</p>
        </div>
      </div>

<div class="status" id="status" style="margin-top: 12px">
        <span class="dot" id="statusDot"></span><span id="statusText">Scroll to begin.</span>
      </div>
      <div class="readout output" id="readout" style="margin-top: 10px"></div>
      <p class="hint" id="supportHint"></p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.