スクロールでナビが畳まれるヘッダー

<div class="d03-11-12-stage">
          <header class="d03-11-12-header">
            <span class="d03-11-12-logo">FOLD</span>
            <nav class="d03-11-12-nav">
              <a href="#" onclick="return false">サービス</a>
              <a href="#" onclick="return false">実績</a>
              <a href="#" onclick="return false">会社概要</a>
              <a href="#" onclick="return false">お問合せ</a>
            </nav>
            <button type="button" class="d03-11-12-burger" aria-label="メニューを開く">
              <span></span><span></span><span></span>
            </button>
          </header>
          <div class="d03-11-12-scroll">
            <div class="d03-11-12-body">
              <p>↓ スクロールするとナビ項目が畳まれハンバーガーに変わります</p>
              <div class="d03-11-12-block"></div>
              <div class="d03-11-12-block"></div>
              <div class="d03-11-12-block"></div>
              <div class="d03-11-12-block"></div>
            </div>
          </div>
        </div>

.prev.d03-11-12{padding:0;display:block}
        .d03-11-12-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc}
        .d03-11-12-header{
          position:absolute;top:0;left:0;right:0;z-index:2;
          display:flex;align-items:center;justify-content:space-between;
          height:54px;padding:0 18px;background:#fff;
          box-shadow:0 2px 8px rgba(0,0,0,.08);
        }
        .d03-11-12-logo{font-weight:800;letter-spacing:.1em;color:#0f172a;font-size:14px;flex:none}
        .d03-11-12-nav{display:flex;gap:14px;overflow:hidden;transition:opacity .25s ease,max-width .25s ease;max-width:400px;opacity:1}
        .d03-11-12-nav a{color:#334155;text-decoration:none;font-size:11.5px;font-weight:600;white-space:nowrap}
        .d03-11-12-burger{
          display:flex;flex-direction:column;justify-content:center;gap:4px;
          width:32px;height:32px;border:none;background:none;cursor:pointer;
          flex:none;opacity:0;width:0;overflow:hidden;transition:opacity .25s ease,width .25s ease;
        }
        .d03-11-12-burger span{display:block;width:20px;height:2px;background:#0f172a;border-radius:1px}
        .d03-11-12-stage.folded .d03-11-12-nav{opacity:0;max-width:0}
        .d03-11-12-stage.folded .d03-11-12-burger{opacity:1;width:32px}
        .d03-11-12-scroll{position:absolute;inset:0;overflow-y:auto;padding-top:54px}
        .d03-11-12-body{padding:16px}
        .d03-11-12-body p{font-size:11.5px;color:#64748b;margin:0 0 12px;text-align:center}
        .d03-11-12-block{
          height:70px;border-radius:8px;margin-bottom:12px;
          background:linear-gradient(135deg,#e2e8f0,#cbd5e1);
        }

(function(){
        var stage=document.querySelector('.d03-11-12-stage');
        if(!stage)return;
        var scroller=stage.querySelector('.d03-11-12-scroll');
        scroller.addEventListener('scroll',function(){
          stage.classList.toggle('folded',scroller.scrollTop>30);
        });
      })();