B18 · הדר שמחליף ערכת צבע לפי הסקשן

CSS

/* B18 · הדר שמחליף ערכת צבע לפי הסקשן */
.th-wrap{position:relative}
.th-head{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutter, clamp(24px, 5vw, 96px));color:var(--ink, #16182b);transition:color .35s}
.th-head nav{display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.08);transition:background .35s,border-color .35s}
.th-head nav span{padding:8px 14px;border-radius:999px;font-size:13px}
.th-head nav span.cta{background:#111;color:#fff;transition:background .35s,color .35s}
.th-head[data-theme="dark"]{color:#fff}
.th-head[data-theme="dark"] nav{background:rgba(20,20,32,.75);border-color:rgba(255,255,255,.12)}
.th-head[data-theme="dark"] nav span.cta{background:#c6ff4a;color:#111}
.th-sec{min-height:90vh;display:grid;place-items:center;font-size:clamp(28px,3vw,52px);font-weight:700}
.th-sec[data-theme="light"]{background:var(--card, #fff);color:var(--muted, #6a6d85)}
.th-sec[data-theme="dark"]{background:#0f1020;color:#a4a7c0}

HTML

<div class="th-wrap">
  <header class="th-head" data-theme="light"><strong>לוגו</strong><nav><span>עבודות</span><span>שירותים</span><span>אודות</span><span class="cta">דברו איתנו</span></nav></header>
  <section class="th-sec" data-theme="light">סקשן בהיר</section>
  <section class="th-sec" data-theme="dark">סקשן כהה</section>
  <section class="th-sec" data-theme="light">שוב בהיר</section>
  <section class="th-sec" data-theme="dark">ושוב כהה</section>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const head=document.querySelector(".th-head");
  const h=()=>head.offsetHeight;
  gsap.utils.toArray(".th-sec").forEach(s=>ScrollTrigger.create({trigger:s,start:()=>"top "+h()*0.6,end:()=>"bottom "+h()*0.6,
    onToggle:self=>{if(self.isActive)head.dataset.theme=s.dataset.theme;}}));
})();