in English

Scrollspy

עדכן אוטומטית את רכיבי הניווט של Bootstrap או רשימת קבוצות בהתבסס על מיקום הגלילה כדי לציין איזה קישור פעיל כעת בנקודת התצוגה.

איך זה עובד

ל-Scrollspy יש כמה דרישות לתפקוד תקין:

  • אם אתה בונה את JavaScript שלנו מהמקור, זה דורשutil.js .
  • יש להשתמש בו ברכיב או בקבוצת רשימה של Bootstrap .
  • Scrollspy דורש position: relative;על הרכיב שאתה מרגל אחריו, בדרך כלל את ה- <body>.
  • כאשר מרגלים אחר אלמנטים אחרים מלבד ה- <body>, הקפידו על heightסט overflow-y: scroll;ויישם.
  • עוגנים ( <a>) נדרשים וחייבים להצביע על אלמנט עם זה id.

לאחר יישום בהצלחה, הניווט או קבוצת הרשימה שלך יתעדכנו בהתאם, ויעבירו את .activeהכיתה מפריט אחד למשנהו על סמך היעדים המשויכים להם.

דוגמה ב-navbar

גלול באזור שמתחת לסרגל הניווט וצפה בשינוי הכיתה הפעילה. הפריטים הנפתחים יודגשו גם כן.

@שמן

תוכן מציין מיקום עבור דוגמת ה-Scrollspy. יש לך את הארכיטקטורה הטובה ביותר. חותמות דרכון, היא קוסמופוליטית. בסדר, רענן, עז, יש לנו את זה על הנעילה. מעולם לא תכננתי שיום אחד אאבד אותך. היא אוכלת לך את הלב. הנשיקה שלך היא קוסמית, כל מהלך הוא קסם. אני מתכוון לאלה, אני מתכוון כאילו היא האחת. שלום אהובים בואו נצא למסע. פשוט הבעלים של הלילה כמו ה-4 ביולי! אבל אתה מעדיף להתבזבז.

@mdo

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

אחד

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

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

ועוד קצת תוכן מציין מיקום, למען האמת.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

דוגמה עם ניווט מקונן

Scrollspy עובד גם עם .navs מקוננות. אם קינן .navהוא .active, גם הוריו יהיו .active. גלול את האזור שליד סרגל הניווט וצפה בשינוי הכיתה הפעילה.

פריט 1

תוכן מציין מיקום עבור דוגמת ה-Scrollspy. זה קשור לפריט 1. לוקח אותך קילומטרים גבוה, כל כך גבוה, כי יש לה חיוך בינלאומי אחד. יש זר במיטה שלי, יש דפיקות בראש שלי. אוי לא. בחיים אחרים הייתי גורם לך להישאר. כי אני, אני מסוגל להכל. מתאים לקרב הכתר שלי. נהגו לגנוב את המשקאות של ההורים שלכם ולטפס לגג. גוון, בכושר שזוף ומוכן, הגביר אותו כי הוא נהיה כבד. האהבה שלה היא כמו סם. אני מניח ששכחתי שיש לי ברירה.

פריט 1-1

תוכן מציין מיקום עבור דוגמת ה-Scrollspy. זה מתייחס לפריט 1-1. יש לך את הארכיטקטורה הטובה ביותר. חותמות דרכון, היא קוסמופוליטית. בסדר, רענן, עז, יש לנו את זה על הנעילה. מעולם לא תכננתי שיום אחד אאבד אותך. היא אוכלת לך את הלב. הנשיקה שלך היא קוסמית, כל מהלך הוא קסם. אני מתכוון לאלה, אני מתכוון כאילו היא האחת. שלום אהובים בואו נצא למסע. פשוט הבעלים של הלילה כמו ה-4 ביולי! אבל אתה מעדיף להתבזבז.

פריט 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

תוכן מציין מיקום עבור דוגמת ה-Scrollspy. זה מתייחס לפריט 3-2. אתה מקורי, לא ניתן להחלפה. כל הלילה הם מנגנים, השיר שלך. בנות קליפורניה אי אפשר להכחיש אותנו. כמו ציפור בלי כלוב. אין פחד עכשיו, עזוב ופשוט תהיה חופשי, אני אוהב אותך ללא תנאים. אני יכול לראות את הכתובת על הקיר. אתה יכול לטייל בעולם אבל שום דבר לא מתקרב לחוף הזהב.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

דוגמה עם רשימה-קבוצה

Scrollspy עובד גם עם .list-groups. גלול את האזור שליד קבוצת הרשימה וצפה בשינוי הכיתה הפעילה.

פריט 1

תוכן מציין מיקום עבור דוגמה של קבוצת רשימות scrollspy. זה מתייחס לפריט 1. לא צריך התנצלויות. אין פחד עכשיו, עזוב ופשוט תהיה חופשי, אני אוהב אותך ללא תנאים. ליל שישי שעבר. אל תהיה בחור ביישן, אני בטוח שהוא יפה. קיץ אחרי התיכון כשהכרנו לראשונה. כי היא המוזה והאמנית. מה? לַחֲכוֹת. חשבתי שאני היוצא מן הכלל.

פריט 2

תוכן מציין מיקום עבור דוגמה של קבוצת רשימות scrollspy. זה קשור לפריט 2. כן, היא רוקדת לפי הקצב שלה. אוי לא. היית יכול להיות הכי גדול. 'כי מותק אתה זיקוק. אולי סיבה לכך שכל הדלתות סגורות. פתח את הלב שלך ופשוט תן לזה להתחיל. אז טרס שיק, כן, היא קלאסיקה.

פריט 3

תוכן מציין מיקום עבור דוגמה של קבוצת רשימות scrollspy. זה מתייחס לפריט 3. אנחנו הולכים גבוה יותר ויותר. אף פעם לא אחד בלי השני, כרתנו ברית. אני הולך על אוויר. מישהו אמר שהסרת את הקעקוע שלך. עכשיו אני צף כמו פרפר. גוון, בכושר שזוף ומוכן, הגביר אותו כי הוא נהיה כבד. כי פעם אתה שלי, פעם אתה שלי. אתה רק צריך להדליק את האור ולתת לו לזרוח! אז יצאנו לשדרה. האם אי פעם הרגשת, מרגישה כל כך דליל בנייר. אני רואה הכל, אני רואה את זה עכשיו.

פריט 4

תוכן מציין מיקום עבור דוגמה של קבוצת רשימות scrollspy. זה קשור לפריט 4. קיץ אחרי התיכון כשנפגשנו לראשונה. אין פחד עכשיו, עזוב ופשוט תהיה חופשי, אני אוהב אותך ללא תנאים. עור מנשק שמש כל כך לוהט שנמיס את הארטיק שלך. האהבה הזו תגרום לך לרחף.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

נוֹהָג

באמצעות תכונות נתונים

כדי להוסיף בקלות התנהגות גלילית לניווט בסרגל העליון שלך, הוסף data-spy="scroll"לרכיב שאתה רוצה לרגל אחריו (בדרך כלל זה יהיה ה- <body>). לאחר מכן הוסף את data-targetהתכונה עם המזהה או המחלקה של רכיב האב של כל .navרכיב Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

דרך JavaScript

לאחר הוספת position: relative;ה-CSS שלך, התקשר ל- scrollspy באמצעות JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

נדרשים יעדי זיהוי ניתנים לפתרון

קישורי Navbar חייבים להיות בעלי יעדי מזהה ניתנים לפתרון. לדוגמה, <a href="#home">home</a>חובה להתאים למשהו ב-DOM כמו <div id="home"></div>.

התעלמו ממרכיבים שאינם :visibleיעד

תתעלם ממרכיבי יעד שאינם :visibleלפי jQuery ופריטי הניווט המתאימים להם לעולם לא יודגשו.

שיטות

.scrollspy('refresh')

בעת שימוש ב-scrollspy בשילוב עם הוספה או הסרה של אלמנטים מה-DOM, תצטרך לקרוא לשיטת הרענון כך:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

הורס את הגלגול של אלמנט.

אפשרויות

ניתן להעביר אפשרויות באמצעות תכונות נתונים או JavaScript. עבור תכונות נתונים, הוסף את שם האפשרות ל- data-, כמו ב- data-offset="".

שֵׁם סוּג בְּרִירַת מֶחדָל תיאור
לְקַזֵז מספר 10 פיקסלים לקיזוז מלמעלה בעת חישוב מיקום הגלילה.
שיטה חוּט אוטומטי מוצא באיזה קטע נמצא האלמנט המריגל. autoיבחר בשיטה הטובה ביותר לקבל קואורדינטות גלילה. offsetישתמש בשיטת היסט jQuery כדי לקבל קואורדינטות גלילה. positionישתמש בשיטת מיקום jQuery כדי לקבל קואורדינטות גלילה.
יַעַד מחרוזת | אובייקט jQuery | אלמנט DOM מציין רכיב להחלת הפלאגין Scrollspy.

אירועים

סוג אירוע תיאור
active.bs.scrollspy אירוע זה מופעל על רכיב הגלילה בכל פעם שפריט חדש מופעל על ידי סרגל הגלילה. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})