overflow: clip vs overflow: hidden — sticky playground

<div class="pg">
    <h1 class="pg-title">🎮 overflow: clip vs overflow: hidden</h1>
    <p class="pg-sub">
      A sticky "Jump bar" lives inside a rounded card. Scroll the panel below and watch what the card's
      <code>overflow</code> value does to it — nothing else about the sticky bar ever changes.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The card's overflow</div>
      <div class="seg" id="seg" role="group" aria-label="overflow mode">
        <button class="btn sm" data-mode="hidden" aria-pressed="true">overflow: hidden</button>
        <button class="btn sm" data-mode="clip" aria-pressed="false">overflow: clip</button>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn ghost sm" id="reset">↺ Reset scroll</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" id="presetBroken">Show the bug</button>
        <button class="btn sm" id="presetFixed">Show the fix</button>
      </div>
      <div class="code" style="margin-top:14px">
<span class="tok-sel">.card</span> { <span class="tok-prop">overflow</span>: <span class="tok-kw" id="codeValue">hidden</span>; }
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Scroll this panel</div>
      <div class="stage" id="stage">
        <div class="filler">Scroll down — the "Jump bar" is inside the card below. Keep going until the card reaches the top of this box.</div>
        <div class="filler">Still scrolling. The card is a reusable component — rounded corners, a soft shadow, nothing unusual.</div>

<div class="card mode-hidden" id="card">
          <div class="jump-bar">
            <span><span class="pin">📌</span> Jump bar — should stick to the top while you scroll</span>
          </div>
          <div class="card-body">
            <p>This card has its own content: a settings list, a comment thread, whatever. It's tall enough that the jump bar has somewhere to go once you scroll past it.</p>
            <p>If <code>position: sticky</code> is working, this bar pins to the top of the scroll panel and stays there until the card scrolls out from under it.</p>
            <p>Keep scrolling through this card's content to find out.</p>
            <p>Almost at the bottom of the card now.</p>
            <p>Last line inside the card — the bar should unstick right about here, once the card itself ends.</p>
          </div>
        </div>

<div class="filler">Past the card. If the bar stuck, it let go right as the card ended — completely normal sticky behavior.</div>
        <div class="filler">End of the scroll area. Hit "↺ Reset scroll" to try the other mode from the top.</div>
      </div>

<div class="status" id="status" style="margin-top:12px">
        <span class="dot" id="dot"></span><span id="statusText">Scroll the panel above to begin.</span>
      </div>
      <p class="hint" id="hint">Caption: with <code>overflow: hidden</code>, the card itself becomes the bar's "scroll container" — and since the card never scrolls on its own, the bar just sits in place instead of sticking to anything.</p>
    </div>
  </div>

preview

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