פס פעולה דביק

פס שקופץ בשנייה הראשונה נתפס כפרסומת ונסגר, ולכן הוא מופיע רק אחרי מסך אחד של גלילה. הוא גם מפנה לעצמו מקום בתחתית העמוד. בלי זה הוא מכסה את שורת הסיום, וזה הבאג הכי נפוץ ברכיב הזה. פס פעולה דביק הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-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>