스티키 헤더

<div class="phone">
  <div class="scroller" id="scroller">
    <header>Header — sticky top:0</header>
    <div class="body">
      <i class="ln"></i><i class="ln"></i><i class="ln"></i><i class="ln"></i>
      <i class="ln"></i><i class="ln"></i><i class="ln"></i><i class="ln"></i>
      <i class="ln"></i><i class="ln"></i><i class="ln"></i><i class="ln"></i>
    </div>
  </div>
</div>

.phone{width:min(60%,220px);height:min(92%,300px);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.12);background:var(--bg)}
.scroller{height:100%;overflow-y:auto;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
header{position:sticky;top:0;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  padding:12px;text-align:center;z-index:1}
.body{padding:14px;display:flex;flex-direction:column;gap:14px}
.ln{display:block;height:14px;border-radius:4px;background:var(--surface);border:1px solid var(--line)}

const scroller = document.getElementById('scroller');
let dir = 1;
function tick() {
  const max = scroller.scrollHeight - scroller.clientHeight;
  scroller.scrollTop += dir * 1.1;
  if (scroller.scrollTop >= max) dir = -1;
  if (scroller.scrollTop <= 0) dir = 1;
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);