��יווט ומעברי עמודים — תנועה חלקה בכל האתר

4.1 למה ניווט הוא הרכיב הכי חשוב באתר (אחרי ה-Hero)

בפרק הקודם בניתם Hero Section שעוצר גלילה. מעולה — המבקר נשאר. ועכשיו? הוא רוצה לנווט. לעבור לעמוד המוצר, לקרוא עוד, למצוא את דף המחירים. אם הניווט לא ברור, לא חלק, ולא מקצועי — לא משנה כמה ה-hero מרהיב, המשתמש יעזוב.

הניווט הוא מערכת העצבים של האתר. הוא לא רק כפתורים למעלה — הוא כולל את כל הדרכים שבהן משתמש עובר ממקום למקום: סרגל עליון, תפריט מובייל, breadcrumbs, חיפוש מהיר, ואפילו הדרך שבה עמוד אחד מתחלף בשני.

ב-2025 ניווט מקצועי כולל 3 שכבות:

בפרק הזה נבנה את כל שלוש השכבות — עם prompt template מוכן לכל רכיב.

ההבדל בין ניווט גנרי לניווט WOW

ניווט גנרי שנוצר על ידי AI בלי brief מדויק נראה ככה: שורה של לינקים בלי sticky, בלי blur, בלי אנימציה, בלי hamburger מונפש. הוא עובד — אבל הוא לא מרשים. הוא לא נותן תחושה של מוצר מלוטש.

ניווט WOW כולל את כל אלה:

• Sticky + Blur: הניווט תמיד נגיש, הרקע מטושטש — מרגיש כמו glassmorphism מקצועי
• אנימציות מיקרו: hover על לינק = underline שמחליק פנימה, לא קופץ
• Hamburger מונפש: 3 קווים שמתמורפים ל-X עם spring feel
• Active indicator: המשתמש תמיד יודע איפה הוא — הלינק הפעיל מסומן
• מעברי עמודים: תמונות "עפות" בין עמודים במקום ה-flash הלבן
• Progress bar: פס דק שאומר "אתה ב-60% של המאמר"

ההבדל? שורה אחת בפרומפט. במקום "build a navigation" — "build a sticky nav with backdrop-filter blur, animated hamburger, scroll spy with active indicator, and View Transitions between pages". AI מבין את כל המילים האלה ובונה בהתאם. הבעיה של רוב האנשים היא שהם לא יודעים אילו מילים לכתוב — ובדיוק לזה הפרק הזה מיועד.

ניווט במובייל — למה זה סיפור אחר לגמרי

בישראל, מעל 70% מהגלישה היא ממובייל. וניווט במובייל הוא עולם אחר מדסקטופ:

• אין hover: mega menu שנפתח ב-hover לא עובד במובייל. צריך click/tap trigger
• מסך קטן: אי אפשר להציג 5 לינקים + לוגו + CTA בשורה אחת ב-375px
• Thumb zone: הלחצנים החשובים חייבים להיות באזור הנגיש לאגודל — חלק תחתון של המסך
• Gestures: משתמשי מובייל מצפים ל-swipe left/right לניווט, swipe down לסגירה
• Performance: מובייל עם חיבור 4G איטי — כל KB של JavaScript מורגש

לכן, בכל prompt template בפרק הזה יש הוראת responsive מפורשת. כשאתם כותבים פרומפט לניווט, תמיד הוסיפו: "On mobile (below 768px): hide full nav, show hamburger, touch targets minimum 44px, support swipe to close".

Bottom navigation — טרנד עולה: חלק מהאתרים המודרניים (בעיקר PWAs) מעבירים את הניווט לתחתית המסך במובייל — כמו באפליקציות iOS/Android. זה מקל על הנגישות לאגודל, אבל דורש חשיבה מחדש על ה-layout. בפרומפט: "Mobile: bottom navigation bar with 4-5 icon tabs, sticky to bottom, 56px height".

לסיכום: אל תשכחו שניווט במובייל הוא לא "גרסה מוקטנת" של דסקטופ. הוא חוויה נפרדת שצריכה תכנון נפרד. ובפרומפט ל-AI, תמיד ציינו את breakpoint (768px) ואת ההתנהגות הספציפית למובייל.

4.2 מתכון: Sticky Nav עם Blur — הסטנדרט של 2025

ה-Sticky Nav הוא הניווט הנפוץ ביותר ב-2025: סרגל שנשאר למעלה כשגוללים. הגרסה המקצועית מוסיפה backdrop-filter: blur() — אפקט glassmorphism שיוצר רקע מטושטש שמאפשר לראות תוכן מאחור. זה מה שעושים Apple, Stripe, Linear, ורוב ה-SaaS sites המודרניים.

איך זה עובד:

• position: sticky; top: 0; — הניווט נדבק לראש המסך
• backdrop-filter: blur(12px); — מטשטש את התוכן שמאחור
• background: rgba(15, 15, 30, 0.8); — רקע שקוף חלקית
• z-index: 1000; — מעל כל תוכן אחר
• transition: background 0.3s ease; — המעבר חלק כשמתחילים לגלול

Prompt Template — Sticky Nav עם Blur

Build a sticky navigation bar with these specs:
- Position: sticky, top: 0, z-index: 1000
- Background: transparent when at top, rgba(15,15,30,0.85) + backdrop-filter: blur(12px) when scrolled
- Add a class "scrolled" via JavaScript when window.scrollY > 50
- Include: logo (right side, RTL), 5 nav links (center), CTA button (left side)
- Nav links: "בית", "אודות", "שירותים", "פרויקטים", "צור קשר"
- CTA: "התחל עכשיו" button with purple gradient (#a855f7 to #7c3aed)
- Font: Heebo, Hebrew, RTL direction
- On mobile (below 768px): hide nav links and CTA, show hamburger icon
- Transitions: background 0.3s ease, box-shadow 0.3s ease
- Add subtle box-shadow when scrolled: 0 2px 20px rgba(0,0,0,0.3)
- Active link: underline indicator with #a855f7, 2px, offset 6px

טריקים שחשוב לדעת

RTL tip: בעברית, הלוגו בצד ימין וה-CTA בצד שמאל — הפוך מאנגלית. ב-prompt ציינו "RTL layout, logo on right" כדי שה-AI יבנה את זה נכון.

Performance tip: backdrop-filter יכול להכביד. אם אתם רואים פריימים חסרים בגלילה, הוסיפו will-change: backdrop-filter לניווט — אבל רק לניווט, לא לכל האלמנטים.

ה-JavaScript שמוסיף את ה-scrolled class:

window.addEventListener('scroll', () => {
  const nav = document.querySelector('.nav-bar');
  nav.classList.toggle('scrolled', window.scrollY > 50);
});

קוד פשוט — 3 שורות. אבל ההבדל בתוצאה הוא דרמטי: ניווט שקוף בראש הדף, blur + צל ברגע שגוללים.

וריאציות של Sticky Nav

Sticky Nav עם blur הוא הבסיס, אבל יש כמה וריאציות שכדאי להכיר:

Israeli market example: wix.com משתמשים ב-sticky nav שמשנה צבע: על ה-hero הכהה — טקסט לבן. כשגוללים לסקציות בהירות — הניווט מקבל רקע לבן וטקסט כהה. זה דורש IntersectionObserver שמזהה את הרקע של הסקציה הנוכחית ומחליף class.

4.3 מתכון: Mega Menu — תפריט שמרשים בלי להציף

ה-Mega Menu הוא תפריט dropdown ענק שנפתח מהניווט ומציג קטגוריות, תמונות, אייקונים וקישורים בפריסת grid. תראו אותו באתרי eCommerce כמו KSP, באתרי חינוך כמו Coursera, ובאתרי enterprise כמו Microsoft.

בניגוד ל-dropdown רגיל שמציג רשימה אנכית, mega menu תופס את רוחב המסך (או חלק גדול ממנו) ומארגן את המידע בעמודות. זה מאפשר למשתמש לסרוק בעיניים את כל הקטגוריות בלי ללחוץ על כל אחת.

Prompt Template — Mega Menu

Build a mega menu dropdown with these specs:
- Trigger: hover on "שירותים" nav link (desktop), click on mobile
- Layout: full-width panel below nav, CSS Grid with 4 columns
- Column 1: "שיווק דיגיטלי" — 4 links with icons
- Column 2: "בניית אתרים" — 4 links with icons
- Column 3: "SEO" — 4 links with icons
- Column 4: Featured image card with CTA
- Entrance animation: opacity 0→1 + translateY(-10px→0) in 250ms ease-out
- Exit animation: reverse, 200ms
- Keyboard accessible: Tab navigates links, Escape closes menu, Arrow keys move between columns
- Click outside closes the menu
- Background: dark theme (#1e1e2e), links in #e2e8f0, hover highlight in #a855f7
- On mobile (below 768px): convert to vertical accordion inside hamburger menu
- RTL layout — first column on the right
- Max-height: 70vh with overflow-y: auto for very long menus
- Focus visible: 2px purple outline on focused links

נגישות ב-Mega Menu — לא אופציונלי

Mega menu שלא עובד עם מקלדת הוא mega menu שבור. הנה הכללים לפי WCAG 2.4.7:

Israeli market note: אתרי eCommerce ישראליים כמו KSP ו-Zap משתמשים ב-mega menu עם עשרות קטגוריות. אם אתם בונים אתר עם מוצרים — mega menu הוא כמעט חובה. אבל גם שם, הגבילו ל-4-5 עמודות מקסימום ב-desktop.

Mega Menu — Do's and Don'ts

ה-hover delay trick: הוסיפו transition-delay: 100ms לפתיחת ה-mega menu. ככה אם המשתמש רק מעביר את העכבר מעל הלינק בדרך למקום אחר — התפריט לא נפתח. רק hover אמיתי (100ms+) פותח. זה מונע "הפתעות" מעצבנות.

4.4 מתכון: Hamburger עם אנימציית Morphing

ה-Hamburger Menu הוא 3 קווים אופקיים שהופכים ל-X כשלוחצים. נשמע פשוט? ההבדל בין חובבני למקצועי הוא האנימציה. hamburger בלי אנימציה — שפשוט מחליף מ-3 קווים ל-X ברגע — נראה כמו אתר מ-2015.

הטכניקה: 3 אלמנטי <span> (או span אחד עם ::before ו-::after). ב-state הרגיל — 3 קווים מאוזנים. ב-state פתוח: הקו האמצעי נעלם (opacity: 0), העליון מסתובב 45° ויורד למרכז, התחתון מסתובב -45° ועולה למרכז. תוצאה: X חלק.

Prompt Template — Hamburger Morphing

Build an animated hamburger menu icon with these specs:
- Structure: button with 3 span elements for the lines
- Default state: 3 horizontal lines, 24px wide, 2px height, 6px gap, white (#e2e8f0)
- Active state (class "active"):
  - Middle line: opacity 0, scale 0
  - Top line: rotate(45deg) + translateY to center
  - Bottom line: rotate(-45deg) + translateY to center
  - Result: smooth X shape
- Transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) — spring feel
- Button size: 44x44px minimum (touch target)
- aria-label: "תפריט ניווט"
- aria-expanded: toggles true/false
- Toggle class "active" on click with JavaScript
- Color: white lines, on hover: #a855f7
- Only visible below 768px (display: none on desktop)

שימו לב ל-cubic-bezier(0.68, -0.55, 0.27, 1.55) — זה easing עם spring effect קל. הקווים לא פשוט מסתובבים — הם "קופצים" קצת לפני שמתייצבים. זה מה שנותן תחושה מקצועית.

SVG Path Morphing — הגרסה המתקדמת

אם רוצים אנימציה עוד יותר חלקה, אפשר לבנות את ה-hamburger מ-SVG paths ולהנפיש את ה-d attribute. ההבדל: במקום 3 קווים שמסתובבים, הצורה עצמה מתמורפת — כמו plasticine שמשנה צורה. זה דורש GSAP MorphSVG או CSS @property — מתקדם יותר, אבל התוצאה מרהיבה.

המלצה: התחילו עם גרסת ה-CSS (3 spans). אם הלקוח מבקש WOW נוסף — שדרגו ל-SVG morphing.

Hamburger Menu — מה קורה כשלוחצים?

ה-hamburger icon הוא רק הטריגר. מה שחשוב באמת: התפריט שנפתח. יש כמה סגנונות:

הסגנון הנפוץ ביותר: slide-in from right (ב-RTL) עם overlay. הוא פשוט, מוכר למשתמשים, ועובד טוב עם swipe gesture לסגירה. אם רוצים WOW — full-screen overlay עם אנימציית stagger על הלינקים (כל לינק נכנס עם 50ms delay אחרי הקודם) נראה מרהיב.

תמחור: בשוק הישראלי, hamburger menu מקצועי עם אנימציה (ללא AI) עולה כ-₪500-₪1,500 כחלק מפיתוח ניווט מלא. עם AI ופרומפט מדויק? חלק מהניווט שנבנה ב-5 דקות.

Accessibility reminder: ה-hamburger button חייב לכלול: aria-label="תפריט ניווט", aria-expanded="false" (שמתחלף ל-"true" כשהתפריט פתוח), ו-aria-controls="mobile-menu" שמצביע על ה-ID של התפריט. בלי אלה, screen readers לא יודעים שזה כפתור שפותח תפריט. ב-prompt: "hamburger button with aria-label, aria-expanded, aria-controls for accessibility".

Z-index trap: hamburger menu שנפתח צריך z-index גבוה מכל דבר אחר בדף — כולל ה-hero, כולל modals. טעות נפוצה: ה-hamburger menu נפתח אבל חלקים ממנו מוסתרים מתחת ל-hero section שיש לו z-index: 100. תמיד הגדירו z-index: 9999 על ה-mobile menu overlay ובדקו בכל הדפים.

4.5 מתכון: Sidebar Navigation ו-Breadcrumbs

Sidebar Navigation הוא ניווט צדדי שנגלל פנימה מצד המסך. נפוץ ב-dashboards (כמו Monday.com), באפליקציות (כמו Gmail), ובאתרי תיעוד (כמו MDN). במובייל, הוא בדרך כלל מוסתר ונפתח בלחיצה על hamburger או בהחלקת אצבע (swipe).

Prompt Template — Sidebar Navigation

Build a sidebar navigation with these specs:
- Position: fixed, right: 0 (RTL), top: 0, height: 100vh, width: 280px
- Default state: translateX(100%) — hidden off-screen to the right
- Open state: translateX(0) — slides in from right
- Transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)
- Background: #1e1e2e with subtle border-left: 1px solid rgba(168,85,247,0.2)
- Overlay: semi-transparent backdrop behind sidebar, click to close
- Navigation items: 8 links with icons, active item highlighted in #a855f7
- Close button: X icon in top-left corner
- Keyboard: Escape closes, Tab cycles through links (focus trap)
- Mobile: swipe right-to-left to open, swipe left-to-right to close
- Animation on open: items stagger in with 50ms delay each, translateX(20px→0) + opacity
- RTL: sidebar comes from RIGHT side, not left
- Hebrew labels for all items

Focus Trap הוא חובה לנגישות: כש-sidebar פתוח, Tab חייב להישאר בתוכו. אם המשתמש לוחץ Tab ו-focus "בורח" לתוכן מאחורי ה-overlay — זו בעיית נגישות חמורה. בפרומפט ציינו "focus trap" וה-AI ידע מה לעשות.

Breadcrumbs — נתיב ניווט

Breadcrumbs מראים את הנתיב ההיררכי: דף הבית → קטגוריה → תת-קטגוריה → עמוד נוכחי. הם עוזרים למשתמש להבין איפה הוא נמצא ולחזור אחורה בקלות.

ב-RTL, החיצים הפוכים — משמאל לימין. ה-HTML הסמנטי:

<nav aria-label="breadcrumb">
  <ol class="breadcrumbs">
    <li><a href="/">דף הבית</a></li>
    <li><a href="/services">שירותים</a></li>
    <li aria-current="page">שיווק דיגיטלי</li>
  </ol>
</nav>

שימו לב ל-aria-label="breadcrumb" ול-aria-current="page" — אלה חובה לנגישות. ה-AI יוסיף אותם אם תציינו "accessible breadcrumbs" בפרומפט.

Breadcrumbs מונפשים — הנגיעה הנוספת

Breadcrumbs רגילים הם סטטיים. Breadcrumbs WOW מוסיפים אנימציה:

• כשנכנסים לעמוד: ה-breadcrumbs נכנסים אחד-אחד משמאל, כל אחד עם delay של 100ms
• כשלוחצים "חזרה": ה-breadcrumb האחרון "נעלם" עם slide-out קל
• Hover: רקע מעוגל מופיע סביב הפריט עם transition

ב-prompt: "Animated breadcrumbs: items enter from left with 100ms stagger, hover shows rounded background highlight, current page has purple text"

RTL בולט: ב-breadcrumbs בעברית, הסדר הוא: דף הבית ← קטגוריה ← עמוד נוכחי (חיצים ימינה-שמאלה, כי אנחנו קוראים מימין לשמאל). ב-CSS משתמשים ב-direction: rtl ובמפריד ← (חץ שמאלה) או chevron icon מופנה שמאלה.

4.6 View Transitions API — מעברי עמודים כמו אפליקציה

זה הרכיב שהופך אתר מ"אוסף דפים" ל"חוויה": View Transitions API. במקום שעמוד אחד נעלם ועמוד שני מופיע ברגע (ה-"בליק" הלבן שכולנו מכירים) — התוכן זורם, כותרות זזות למקום החדש, תמונות מתרחבות. כמו אפליקציה native.

תמיכת דפדפנים (אפריל 2026):

Same-document transitions (SPA) נתמכות בכל הדפדפנים המודרניים ונכנסו ל-Baseline Newly Available בדצמבר 2025. Cross-document transitions (MPA — מעבר בין עמודי HTML שונים) עובדות כרגע רק ב-Chrome ו-Edge.

איך משתמשים — הגרסה הפשוטה

הקוד הבסיסי ב-JavaScript:

// SPA: עוטפים את ה-DOM update ב-startViewTransition
document.startViewTransition(() => {
  // כאן מעדכנים את התוכן
  document.querySelector('.content').innerHTML = newContent;
});

// CSS: שם ייחודי לאלמנטים ש"עוברים" בין מצבים
.page-title {
  view-transition-name: page-title;
}
.hero-image {
  view-transition-name: hero-image;
}

// CSS: התאמה אישית של האנימציה
::view-transition-old(page-title) {
  animation: fade-out 0.25s ease-in;
}
::view-transition-new(page-title) {
  animation: fade-in 0.25s ease-out;
}

מה קורה כאן:

1. אתם קוראים ל-startViewTransition() עם callback שמעדכן את ה-DOM
2. הדפדפן מצלם snapshot של המצב הישן
3. ה-callback רץ — ה-DOM מתעדכן
4. הדפדפן מצלם snapshot של המצב החדש
5. הדפדפן מנפיש בין שני ה-snapshots — cross-fade כברירת מחדל, או morphing אם יש view-transition-name תואם

Page Morphing — אלמנטים ש"עפים" בין עמודים

ה-WOW האמיתי הוא Page Morphing: אלמנט בעמוד A שנראה כאילו הוא עובר פיזית לעמוד B. תחשבו על תמונה בכרטיס שמתרחבת לתמונת header כשנכנסים לעמוד הפרטים — בדיוק כמו באפליקציית iOS.

כל מה שצריך: אותו view-transition-name על האלמנט בשני המצבים. הדפדפן עושה את השאר.

דוגמאות מעשיות ל-Page Morphing:

הכלל: Page morphing עובד הכי טוב כשיש אלמנט ויזואלי ברור (תמונה, כותרת) ששני העמודים חולקים. אם אין אלמנט משותף — Cross-fade רגיל (ברירת המחדל) נראה מצוין.

Cross-Document Transitions (MPA)

אם האתר שלכם הוא MPA (Multi-Page Application — דפי HTML נפרדים, לא React/Vue), אפשר להפעיל View Transitions בין עמודים בלי JavaScript כמעט. מספיק להוסיף ב-CSS:

/* בשני העמודים — ב-CSS */
@view-transition {
  navigation: auto;
}

/* אלמנט משותף */
.page-title {
  view-transition-name: page-title;
}
.hero-image {
  view-transition-name: hero-image;
}

זה עובד רק ב-Chrome/Edge 126+. ב-Safari ו-Firefox — הדף פשוט נטען כרגיל, בלי אנימציה. זה בדיוק progressive enhancement — אין נזק, רק בונוס.

if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  updateDOM(); // פשוט מעדכנים בלי אנימציה
}

View Transitions ב-Frameworks: אם אתם עובדים עם React, Vue או Svelte — שילוב View Transitions קצת שונה. ב-React, למשל, עוטפים את ה-router change. ב-Next.js 14+ ו-Nuxt 3.4+ יש תמיכה built-in ב-View Transitions — לא צריך לכתוב את הקוד ידנית. בפרומפט ל-AI: "Add View Transitions support using the framework's built-in transition API".

Performance note: View Transitions לא פוגעות בביצועים — הדפדפן עושה את ה-animation על layer נפרד (compositor). אין layout recalculation, אין repaints. ה-DOM update קורה ברגע, והאנימציה היא רק ויזואלית. בגלל זה progressive enhancement עובד כל כך טוב — אם הדפדפן לא תומך, ה-DOM update פשוט קורה מיידית בלי עיכוב.

Prompt Template — View Transitions

Build a two-page demo with View Transitions API:
- Page 1: Grid of 3 product cards, each with image + title + price
- Page 2: Full product detail page with hero image + title + description
- When clicking a card, use document.startViewTransition() to navigate
- Shared elements: image (view-transition-name: product-image), title (view-transition-name: product-title)
- Image should morph from card size to full-width hero
- Title should slide from card position to page title position
- Default transition: cross-fade 0.3s for everything else
- Add fallback for browsers without View Transitions support
- Smooth back navigation with browser back button
- Dark theme: #1e1e2e background, #e2e8f0 text, #a855f7 accents
- RTL layout, Hebrew content
- Prices in NIS: ₪99, ₪149, ₪299

4.7 Scroll Progress Indicator ו-Scroll Spy

שני רכיבים שמשדרגים כל אתר עם תוכן ארוך:

Scroll Progress Indicator — פס צבעוני בראש הדף שמתמלא ככל שגוללים למטה. כשאתם ב-50% של הדף — הפס ב-50%. פשוט, אלגנטי, ועוזר למשתמש להבין כמה נשאר. תראו אותו ב-Medium, ב-Dev.to, ובאתרי חדשות מודרניים.

Scroll Spy — מנגנון שמזהה את הסקציה הנוכחית שהמשתמש רואה ומדגיש את הלינק המתאים בניווט. כשגוללים לסעיף "שירותים" — הלינק "שירותים" בניווט מקבל highlight. זה עוזר למשתמש לדעת איפה הוא נמצא בדף.

Scroll Progress — שתי דרכים

דרך 1: JavaScript (עובד בכל מקום)

// HTML: <div class="progress-bar"></div>
const progressBar = document.querySelector('.progress-bar');

window.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight
                     - document.documentElement.clientHeight;
  const progress = (scrollTop / scrollHeight) * 100;
  progressBar.style.width = progress + '%';
});

דרך 2: CSS Pure (Chrome/Edge בלבד)

.progress-bar {
  position: fixed;
  top: 0;
  left: 0; /* RTL: right: 0 for fill from right */
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #a855f7, #7c3aed);
  transform-origin: left;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

גרסת ה-CSS משתמשת ב-animation-timeline: scroll() — נקייה ומבלי JavaScript, אבל נתמכת רק ב-Chrome/Edge (אפריל 2026). המלצה: השתמשו בגרסת JS כברירת מחדל, והוסיפו CSS כ-progressive enhancement.

עיצוב ה-Progress Bar — מעבר ל-Default

פס פשוט בגובה 3px עובד, אבל יש כמה שדרוגים שמוסיפים polish:

בפרומפט: "Scroll progress bar at top, 3px height, purple gradient (#a855f7 to #ec4899), subtle glow effect, positioned just below the sticky nav".

Scroll Spy עם IntersectionObserver

בעבר, scroll spy דרש האזנה ל-scroll event + חישובים מסובכים. היום יש IntersectionObserver — API שמודיע לכם מתי אלמנט נכנס/יוצא מאזור הצפייה. הרבה יותר performant ופשוט:

const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      navLinks.forEach(link => link.classList.remove('active'));
      const activeLink = document.querySelector(
        `.nav-link[href="#${entry.target.id}"]`
      );
      if (activeLink) activeLink.classList.add('active');
    }
  });
}, { rootMargin: '-20% 0px -80% 0px' });

sections.forEach(section => observer.observe(section));

ה-rootMargin: '-20% 0px -80% 0px' אומר: "חשב סקציה כ-active כשהיא ב-20% העליונים של המסך". זה נותן תחושה טבעית — הסקציה מסומנת כשמתחילים לקרוא אותה, לא כשמגיעים לסופה.

למה IntersectionObserver ולא scroll event?

בעבר, scroll spy נבנה עם window.addEventListener('scroll', ...) וחישוב ידני של getBoundingClientRect() לכל סקציה. הבעיה: scroll event מופעל עשרות פעמים בשנייה בכל pixel של גלילה, ו-getBoundingClientRect() גורם ל-layout recalculation (forced reflow) — שני הדברים הכי יקרים ביצועית.

IntersectionObserver הוא async — הדפדפן מחשב את ה-intersections בזמן שלו, מחוץ ל-main thread. הקוד קצר יותר, ביצועים טובים פי 5-10, ואין צורך ב-throttle/debounce.

המלצה: תמיד השתמשו ב-IntersectionObserver ל-scroll spy. אין סיבה להשתמש ב-scroll event ב-2026 אלא אם צריכים את ה-pixel-level precision (כמו ב-progress bar).

Active Link Indicator — הנגיעה הסופית

כשה-scroll spy מזהה סקציה חדשה, הלינק בניווט מקבל .active class. ה-CSS שהופך את זה למרשים:

.nav-link {
  position: relative;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: 0; /* RTL */
  width: 100%;
  height: 2px;
  background: #a855f7;
  animation: slide-in 0.3s ease-out;
}
@keyframes slide-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

4.8 Command Palette (Ctrl+K) — חיפוש מהיר כמו מקצוענים

אם השתמשתם ב-VS Code, Notion, Figma, או GitHub — אתם מכירים את הפטרן: לוחצים Ctrl+K (או Cmd+K ב-Mac), נפתח חלון חיפוש, מקלידים מה שמחפשים, ומגיעים לשם בשנייה. זה Command Palette — ובשנתיים האחרונות הוא עבר מכלי למפתחים לסטנדרט ב-SaaS ואפילו באתרי eCommerce.

למה הוא כל כך טוב?

• מהירות: לחיצה אחת + הקלדה > ניווט בתפריטים עם 3-4 לחיצות
• Discoverability: המשתמש מגלה עמודים ופעולות שלא ידע שקיימים
• Power user love: משתמשים מנוסים מרגישים "בבית"
• מובייל: נפתח גם עם כפתור חיפוש — לא חייבים keyboard shortcut

Prompt Template — Command Palette

Build a command palette (Ctrl+K) with these specs:
- Trigger: Ctrl+K (Windows) / Cmd+K (Mac), or click on search icon in nav
- UI: centered dialog, 500px wide, dark theme (#1e1e2e bg, #2a2a3e input bg)
- Search input at top with "חפש עמודים, פעולות..." placeholder
- Results list below with max 8 visible items, scrollable
- Categories: "עמודים" (pages), "פעולות" (actions), "לאחרונה" (recent)
- Each result: icon + title (Hebrew) + optional keyboard shortcut badge
- Keyboard navigation: Arrow up/down to select, Enter to activate, Escape to close
- Fuzzy search: typing "שיר" finds "שירותים" and "שיווק"
- Backdrop: semi-transparent overlay behind palette
- Entrance: scale(0.95)→scale(1) + opacity 0→1, 200ms ease-out
- Exit: reverse, 150ms
- Focus: auto-focus on input when opened
- Highlight: selected item has #a855f7 left border + darker bg
- RTL layout, Hebrew labels
- Show "אין תוצאות" when no matches found
- Close on click outside or Escape

מתי כן ומתי לא

Command palette הוא לא לכל אתר:

• כן: SaaS, dashboard, אתר תיעוד, פלטפורמה עם הרבה עמודים
• כן: אתר עם 20+ עמודים שקשה לנווט בתפריט רגיל
• לא: landing page עם עמוד אחד
• לא: אתר תדמית קטן עם 5 עמודים — overkill

תמחור בשוק הישראלי: הוספת command palette לאתר קיים = בערך 3-5 שעות עבודה (₪1,500-₪3,000 אם מזמינים ממפתח). עם AI ופרומפט טוב? 30 דקות.

האנטומיה של Command Palette מצוין

כל command palette מצוין מורכב מ-6 רכיבים:

Fuzzy Search — חובה בעברית: חיפוש מדויק בעברית בעייתי — אנשים מקלידים "שרות" במקום "שירות" או "srvs" במקום "services". Fuzzy search מוצא תוצאות גם עם שגיאות. בפרומפט: "Add fuzzy search that finds partial matches in Hebrew and English".

ספריות מומלצות: אם אתם בונים ב-React, cmdk (מ-Rauno Freiberg, היוצר של Vercel's design) ו-kbar הן שתי הספריות הפופולריות ביותר. הן composable, unstyled (אתם מעצבים), ותומכות ב-keyboard navigation מלא. לפרויקטים בלי React — vanilla JS עם הפרומפט שלמעלה עובד מצוין.

Accessibility בפלטה: Command palette חייבת לעמוד ב-WCAG:

• role="dialog" ו-aria-modal="true" על ה-container
• role="combobox" על ה-search input
• role="listbox" על רשימת התוצאות, role="option" על כל תוצאה
• aria-activedescendant שמעודכן כשמנווטים עם Arrow keys
• aria-label="חיפוש מהיר" על ה-dialog

בפרומפט: "Command palette must be fully accessible with ARIA roles: dialog, combobox, listbox, option". ה-AI יוסיף את כל ה-attributes הנכונים.

4.9 הקומבו המנצח — Sticky + Progress + Blur + Spy

למדנו כל רכיב בנפרד. עכשיו מגיע הרגע ששווה את כל הפרק: חיבור הכל ביחד.

הקומבו הנפוץ ביותר ב-2025 לאתרים עם תוכן:

1. Sticky Nav עם Blur — הבסיס, תמיד שם
2. Scroll Progress Bar — מעל הניווט, מראה כמה נשאר
3. Scroll Spy — מדגיש את הסקציה הנוכחית בניווט
4. Active Link Indicator — קו תחתון שזז בין הלינקים

ביחד, ארבעת הרכיבים יוצרים חוויה שאומרת למשתמש: "אתה יודע בדיוק איפה אתה, כמה נשאר, ואיך להגיע לכל מקום." זה ההבדל בין אתר שגוללים בו בבלבול לבין אתר שמרגיש כמו אפליקציה.

דוגמאות מהשטח — מי עושה את זה טוב?

בואו נראה איך אתרים אמיתיים משלבים את הקומבו:

שימו לב: אף אחד מהאתרים הללו לא משתמש בכל הרכיבים ביחד. כל אחד בוחר את הקומבינציה שמתאימה לסוג התוכן שלו. הכלל: sticky + blur הוא בסיס חובה. הוסיפו 1-2 רכיבים נוספים לפי הצורך — לא יותר.

אם אתם בונים אתר עם תוכן ארוך (בלוג, תיעוד, קורס) — הקומבו שעובד הכי טוב: sticky blur + progress bar + scroll spy. שלושת אלה ביחד נותנים למשתמש תחושה של שליטה ומיקום בלי להכביד על הממשק.

אם אתם בונים SaaS או פלטפורמה — הקומבו: sticky blur + command palette (Ctrl+K) + View Transitions. Power users אוהבים keyboard shortcuts, והמעברים החלקים עושים הבדל עצום בתחושת ה-UX.

Prompt Template — הקומבו המלא

Build a complete navigation experience:

1. STICKY NAV:
   - position: sticky, top: 0, z-index: 1000
   - backdrop-filter: blur(12px) when scrolled
   - 5 section links with smooth scroll behavior

2. SCROLL PROGRESS BAR:
   - Fixed at very top (above nav), 3px height
   - Gradient: #a855f7 to #7c3aed
   - Width updates on scroll from 0% to 100%

3. SCROLL SPY:
   - IntersectionObserver watches all sections
   - Adds .active class to matching nav link
   - rootMargin: '-20% 0px -80% 0px'

4. ACTIVE LINK INDICATOR:
   - Animated underline on .active nav link
   - 2px purple line with slide-in animation

5. RESPONSIVE:
   - Desktop: full horizontal nav
   - Mobile (below 768px): hamburger menu

RTL layout, Hebrew content, dark theme
Smooth scroll: scroll-behavior: smooth on html
Performance: single scroll listener with requestAnimationFrame

Performance — בלי לשבור את הדף

כשמשלבים scroll listener + IntersectionObserver + backdrop-filter — צריך לשים לב לביצועים:

טריק מפתח: במקום לעדכן width של progress bar, השתמשו ב-transform: scaleX(progress). ל-transform יש ביצועים הרבה יותר טובים כי הוא רץ על ה-GPU (compositor thread) ולא גורם ל-layout recalculation.

איך לוודא שהקומבו עובד ב-RTL

כשמשלבים את כל הרכיבים ביחד, RTL יכול לשבור דברים. הנה רשימת בדיקות:

Pro tip: בפרומפט ל-AI, תמיד ציינו "RTL layout, Hebrew content" בהתחלה. זה חוסך 80% מבעיות ה-RTL כי ה-AI מתחשב בזה מההתחלה. אם שוכחים ומוסיפים RTL אחרי — צריך לתקן הרבה דברים.

Smooth Scroll — הבסיס ששוכחים

לפני שכל הרכיבים המתקדמים עובדים, צריך דבר אחד בסיסי: smooth scrolling. בלי זה, לחיצה על לינק בניווט שמפנה ל-anchor ("שירותים" → #services) קופצת לסקציה ברגע. עם smooth scroll, הדף גולל בצורה חלקה:

/* CSS — שורה אחת שמשנה הכל */
html {
  scroll-behavior: smooth;
}

/* עם offset לניווט sticky */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* גובה הניווט */
}

ה-scroll-padding-top חשוב: בלי זה, הסקציה שגוללים אליה תיחתך מתחת לניווט ה-sticky. הערך צריך להיות לפחות כגובה הניווט שלכם (בדרך כלל 60-80px).

שימו לב: scroll-behavior: smooth מכובד גם על ידי prefers-reduced-motion. אם למשתמש יש הגדרה שמבקשת פחות אנימציה, הדפדפן יתעלם מ-smooth ויקפוץ ישירות. זה בדיוק הנכון — נגישות מובנית.

בפרומפט ל-AI, הוסיפו תמיד: "html { scroll-behavior: smooth; scroll-padding-top: 80px; }" — זה מבטיח שניווט anchor-based עובד חלק עם sticky nav.

JavaScript alternative: אם צריכים שליטה מדויקת יותר (למשל, easing שונה), אפשר להשתמש ב-JavaScript:

document.querySelector('#services').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});

היתרון: אפשר להוסיף callback אחרי שהגלילה נגמרת, לשלוט ב-timing, ולשלב עם View Transitions. החיסרון: יותר קוד ותלות ב-JavaScript.

ביצועים — Benchmark לניווט

אחרי שבניתם את הקומבו, הריצו את הבדיקות הבאות:

דוגמאות מייצגות מהשוק הישראלי: אתרי SaaS ישראליים כמו Monday.com ו-Fiverr משקיעים הרבה בניווט. Monday.com משתמשים ב-sticky nav עם command palette (Ctrl+K), sidebar navigation ב-dashboard, ו-breadcrumbs בעמודים פנימיים. Fiverr משתמשים ב-mega menu עם קטגוריות ותמונות. שניהם דוגמאות מצוינות לחקות.

4.10 סיכום ו-Navigation Checklist

5 Prompt Templates — סיכום מהיר

הנה כל 5 ה-prompt templates שלמדנו, בקיצור. שמרו את הטבלה הזו — היא השליף שלכם:

איך להשתמש: קחו את ה-Core Phrase, הוסיפו "RTL layout, Hebrew content, dark theme (#1e1e2e), responsive" — ויש לכם prompt בסיסי שעובד. לפרטים מלאים, חזרו לסעיף הרלוונטי והעתיקו את ה-prompt המלא.

שמרו את הטבלה הזו. היא תשמש אתכם בכל פרויקט חדש. כשלקוח מבקש "ניווט מקצועי" — אתם יודעים בדיוק איזה prompt להעתיק לפי סוג האתר (ראו את ה-framework בסעיף 4.1). עם 5 ה-prompts האלה, אתם מכסים את כל סוגי הניווט ש-90% מהאתרים צריכים.

Navigation Quality Checklist

לפני שמעבירים אתר עם ניווט לפרודקשן, עברו על הרשימה: