ניווט עוגנים

scroll-margin-top על הסקשנים הוא מה שמונע מכותרת דביקה לכסות את כותרת הסקשן אחרי קפיצה לעוגן — שורת CSS אחת במקום תיקון offset בקוד. הסימון של הפריט הפעיל נעשה בפס קריאה באמצע המסך, ולא בחישוב מרחקים בכל אירוע גלילה. ניווט עוגנים הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · ניווט · גלילה · נגישות

<!-- ניווט עוגנים — ה-id של כל סקשן חייב להתאים ל-href -->
<style>
  /* מונע מכותרת דביקה לכסות את כותרת הסקשן אחרי קפיצה לעוגן */
  .klix-section { scroll-margin-top: 5rem }
  .klix-secnav ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none }
  .klix-secnav a { display: block; padding: .5rem .75rem; border-radius: .5rem;
    color: #94a3b8; font-size: .9rem; text-decoration: none }
  .klix-secnav a[aria-current="true"] { background: rgba(255,255,255,.1);
    color: #e2e8f0; font-weight: 700 }
  html { scroll-behavior: smooth }
  html[data-motion="off"] { scroll-behavior: auto }
</style>

<nav class="klix-secnav" aria-label="ניווט בעמוד">
  <ul>
    <li><a href="#services">שירותים</a></li>
    <li><a href="#process">איך זה עובד</a></li>
    <li><a href="#faq">שאלות נפוצות</a></li>
  </ul>
</nav>

<script>
(function () {
  var nav = document.querySelector('.klix-secnav');
  if (!nav || !('IntersectionObserver' in window)) return;

  var links = nav.querySelectorAll('a[href^="#"]');
  var map = {};
  var targets = [];

  links.forEach(function (a) {
    var el = document.getElementById(a.getAttribute('href').slice(1));
    if (!el) return;
    el.classList.add('klix-section');
    map[el.id] = a;
    targets.push(el);
  });

  // פס קריאה באמצע המסך, במקום לחשב מרחקים בכל אירוע גלילה
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) return;
      links.forEach(function (a) { a.removeAttribute('aria-current'); });
      map[entry.target.id].setAttribute('aria-current', 'true');
    });
  }, { rootMargin: '-45% 0px -45% 0px' });

  targets.forEach(function (el) { io.observe(el); });
})();
</script>