פס פעולה דביק

פס שקופץ בשנייה הראשונה נתפס כפרסומת ונסגר, ולכן הוא מופיע רק אחרי מסך אחד של גלילה. הוא גם מפנה לעצמו מקום בתחתית העמוד — בלי זה הוא מכסה את שורת הסיום, וזה הבאג הכי נפוץ ברכיב הזה. פס פעולה דביק הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · המרה · מובייל · בלי ספריות

<!-- פס פעולה דביק — החליפו את הקישור והטקסט -->
<style>
  .klix-sticky-cta { position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem; background: rgba(15,23,42,.95); backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,.1);
    transform: translateY(100%); transition: transform .3s ease }
  .klix-sticky-cta[data-show="1"] { transform: translateY(0) }
  .klix-sticky-cta p { margin: 0; font-size: .9rem; color: #cbd5e1 }
  .klix-sticky-cta a { padding: .8rem 1.25rem; border-radius: .8rem;
    background: #6366f1; color: #fff; font-weight: 700; text-decoration: none }
  html[data-motion="off"] .klix-sticky-cta { transition: none }
</style>

<div class="klix-sticky-cta" id="klix-sticky-cta">
  <p>שיחת ייעוץ ללא עלות</p>
  <a href="tel:+972500000000">דברו איתנו</a>
</div>

<script>
(function () {
  var bar = document.getElementById('klix-sticky-cta');
  if (!bar) return;

  function update() {
    var show = window.scrollY > window.innerHeight * 0.9;
    bar.setAttribute('data-show', show ? '1' : '0');
    // מפנים מקום בתחתית העמוד בגובה הפס עצמו, אחרת הוא מכסה את שורת הסיום
    document.body.style.paddingBottom = show ? bar.offsetHeight + 'px' : '';
  }

  update();
  window.addEventListener('scroll', update, { passive: true });
  window.addEventListener('resize', update);
})();
</script>