B03 · CTA דביק חכם

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-inline:28px;border-radius:999px;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);font-weight:500;font-size:16px;border:0;cursor:pointer;font-family:inherit}

/* B03 · CTA דביק חכם */
.cta-hero{padding:60px var(--gutter, clamp(24px, 5vw, 96px));text-align:center}
.stickycta{position:fixed;bottom:24px;inset-inline-start:24px;z-index:80;opacity:0;translate:0 12px;pointer-events:none;transition:opacity .24s,translate .24s}
.stickycta.show{opacity:1;translate:0 0;pointer-events:auto}
.stickycta .gbtn{box-shadow:0 8px 24px rgba(74,58,255,.35)}
.filler{height:120vh;display:flex;align-items:center;justify-content:center;color:var(--muted, #6a6d85)}

HTML

<div class="cta-hero"><button class="gbtn main-cta">הכפתור הראשי (כשאני נראה, הצף נעלם)</button></div>
<div class="filler">גלול. כשהכפתור הראשי ייצא מהמסך, יופיע כפתור צף</div>
<div class="cta-hero"><button class="gbtn main-cta">עוד כפתור ראשי בתחתית</button></div>
<div class="stickycta"><button class="gbtn">בואו נדבר</button></div>

JS

const sticky=document.querySelector(".stickycta");let visible=new Set();
const io=new IntersectionObserver(es=>{
  es.forEach(e=>{e.isIntersecting?visible.add(e.target):visible.delete(e.target)});
  sticky.classList.toggle("show",visible.size===0);
},{rootMargin:"-72px"});
document.querySelectorAll(".main-cta").forEach(el=>io.observe(el));