סקראָלספּי

אויטאָמאַטיש דערהייַנטיקן Bootstrap נאַוויגאַציע אָדער רשימה גרופּע קאַמפּאָונאַנץ באזירט אויף מעגילע שטעלע צו אָנווייַזן וואָס לינק איז דערווייַל אַקטיוו אין די וויופּאָרט.

וויאזוי עס ארבעט

Scrollspy האט עטלעכע רעקווירעמענץ צו פונקציאָנירן רעכט:

אויב איר בויען אונדזער דזשאַוואַסקריפּט פֿון מקור, עס ריקווייערזutil.js .
עס מוזן זיין געוויינט אויף אַ Bootstrap נאַוו קאָמפּאָנענט אָדער רשימה גרופּע .
סקראָלספּי ריקווייערז position: relative;די עלעמענט איר ספּייינג אויף, יוזשאַוואַלי די <body>.
ווען ספּייינג אויף אנדערע עלעמענטן ווי די <body>, זיין זיכער צו האָבן אַ heightגאַנג און overflow-y: scroll;געווענדט.
אַנגקערז ( <a>) זענען פארלאנגט און מוזן פונט צו אַן עלעמענט מיט דעם id.

ווען הצלחה ימפּלאַמענאַד, דיין נאַוו אָדער רשימה גרופּע וועט דערהייַנטיקן אַקאָרדינגלי, מאָווינג די .activeקלאַס פון איין נומער צו דער ווייַטער באזירט אויף זייער פֿאַרבונדן טאַרגאַץ.

מעגילע די געגנט אונטער די נאַוובאַר און היטן די אַקטיוו קלאַס טוישן. די דראָפּדאָוון ייטאַמז וועט אויך זיין כיילייטיד.

@פעט

אַד לעגינגז קייטאַר, בראַנטש שייַן קונסט פּאַרטיי דאָלאָר אַרבעט. פּיטשפאָרק יר ענים לא-פי איידער זיי סאָלד אויס קווי. טומבלר פאַרם-צו-טיש וועלאָסיפּעד רעכט וועלכער. ענים כאפיע קארלס קארדיגן. וועליט סעיטאַן מקססוועעעני ס פאָטאָ בוט 3 וואָלף לבנה ירורע. קאָסבי סוועטער לאָמאָ דזשין קורצע הייזלעך, וויליאַמסבורג האָאָדיע מינים וואָס איר מיסטאָמע האָבן נישט געהערט פון זיי און קאַרדיגאַן טראַסט פאָנד culpa biodiesel Wes anderson esthetic. ניהיל טאַטוד אַקסאַמוס, קרעד איראָניע ביאָדיעסעל קעפייעה האַרטמאַן וללאַמקאָ קאָנסעקוואַט.

@מדאָ

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

קיטאַר צוויי בלאָג, אַ שליח טאַש מיט וועלכער דילעקטוס עסנוואַרג טראָק. סאַפּיענט סינטה שייַן אַססומענדאַ. לאָקאַוואָרע סעד העלוועטיקאַ קליינטשיק איראָניע, טאַנדערקאַץ איר מיסטאָמע האָבן נישט געהערט פון זיי קאָנסעקוואַט האָאָדיע גלוטען-פֿרייַ לאָ-פי פאַפּ אַליקוויפּ. לאַבאָר עליט אָרט איידער זיי סאָלד אויס, טערי ריטשאַרדסאָן פּראָידענט בראַנטש נעססיונט quis cosby sweater pariatur keffiyeh ut helvetica artisan. קאַרדיגאַן מעלאָכע ביר סעיטאַן פאַרטיק וועליט. VHS טשאַמברייַ לאַבאָראַטאָריע צייט. אַנימע מאָלליט מינימאַל קאָממאָדאָ וללאַמקאָ טאַנדערקאַץ.

<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-haspopup="true" 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>

בייַשפּיל מיט נעסטעד נאַוויגאַציע

סקראָלספּי אויך אַרבעט מיט נעסטעד .navס. אויב אַ נעסטעד .navאיז .active, זיין עלטערן וועלן אויך זיין .active. מעגילע די געגנט ווייַטער צו די נאַוובאַר און היטן די אַקטיוו קלאַס טוישן.

נומער 1

עקס קאָנסעקוואַט קאָממאָדאָ אַדאַפּיסיסינג עקסערסיטיישאַן אָטע עקסעפּטער אָקקאַעקאַט וללאַמקאָ דויס אַליקוו יד מאַגנ וללאַמקאָ אי.יו. דו זאלסט נישט פאַרגעסן וועגן די קאַנסאַנטריישאַן און אַרבעט. פוגיאַט לאַבאָראַטאָרי ינסידידונט צייט אין יו. עס. וואָס אַרבעט טאָן ניט ויסשליסן זיך אין די אַרבעט פון די קאַנסטראַקטאַד אין. אַליקוויפּ נוללאַ ענים וועניאַם ניט פוגיאַט שייַן קופּידאַטאַט נולאַ עליט קופּידאַטאַט קאָממאָדאָ וועליט וט עוסמאָד קופּידאַטאַט עליט דאָלאָרע.

נומער 1-1

אָט די צייט וואָס איר דאַרפֿן צו באַקומען אַ באַזונדער קאָממאָדאָ. אַליקוויפּ אַרבעט עקסעס עס וואָלופּטאַטע אָקקאַעקאַט לאָרעם וללאַמקאָ דיזערונט. אַליקוו cillum excepteur irure consequat id quis ea. זיצן פּראָידענט ullamco aut magna pariatur nostrud labore. רעפּרעהענדעריט אַליקוואַד קאָממאָדאָ עוסמאָד אַליקוויפּ איז צו טאָן איר פּראָידענט מאַגנאַ קאָנסעקטעטור קאָנסעקוואַט אי.יו. ענים אַליקוויפּ עקסערסיטיישאַן ullamco adipisicing voluptate excepteur מינים עקסערסיטאַטיאָן מינים מינים קאָממאָדאָ אַדיפּיסיסינג עקסערסיטיישאַן אָפפיסיאַ ניסי אַדיפּיסיסינג. אַנימע יד איז וואָס איר דאַרפֿן צו אַדאַפּיזינג סינט דאָלאָר עליט סילום אַנימע און פוגיאַט.

נומער 2-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

לאַבאָרעס זיצן קולפּאַ קאָממאָדאָ עליט אַדיפּיסיסינג זיצן אַליקוויפּ עליט פּראָידענט וואָלופּטאַטע מינים מאָלליט נאָסטרוד און רעפּרעהענדעריט טאָן. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. אָקקאַעקאַט קאָנסעקטעטור איז ניט אין אָקקאַעקאַט פּראָידענט מינים און ניט רעפּראַהענדערינג עקסערסיטיישאַן קופּידאַטאַט און טאָן אָפפיסיע. אַקיאַפּייז די אַרבעט פון די אַרבעט. סיט פאראאטור צייט פראדענט אין וועניאם קולפא אליקא חוץ עלית מאגנא פוגיאט עיווסמוד אמט אפיס.

<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 2-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>

בייַשפּיל מיט רשימה-גרופּע

סקראָלספּי אויך אַרבעט מיט .list-groups. מעגילע די געגנט ווייַטער צו דער רשימה גרופּע און היטן די אַקטיוו קלאַס טוישן.

נומער 1 נומער 2 נומער 3 נומער 4

נומער 1

נומער 2

ווי צו שפּילן די שפּיל אָנליין איר קענען געפֿינען אַ פּלאַץ פון צייט. לאַבאָרום קאָנסעקוואַט ניט עלית ענים עקסערסיטאַטיאָן cillum aliqua consequat id aliqua. די עקסערסייזיז פון די וואָלופּטטאַטע איז אין צוויי אַרבעטלאָזיקייַט און אַרבעט אין די לעצטע צייט. אינסידידונט וועניאם וועליט עלית עלית וועניאם לורם אליקווא quis ullamco deserunt sit enim elit aliqua esse irure. די אַרבעט איז נישט אַ טאָג פֿאַר די אַרבעט פון די אַרבעט. עס איז מעגלעך צו פאַרשפּאַרן די צייט פון די קאַנסעפּס.

נומער 3

קוויס אנים סיט דו אמעט פוגיאט דאלער וועליט זיצן עא עא דו רעפרהענדעריט קולפא דויס. נאָסטררוד אַליקוו יפּסום פוגיאַט מינים פּראָידענט אָקקאַעקאַט יקסעפּטער אַליקוויפּ culpa autte tempor reprehenderit. דעסערונט צייַט מאָלליט עליט עקס פּאַריאַטור דאָלאָרע וועליט פוגיאַט מאָלליט קולפּאַ ירורע וללאַמקאָ עסט עקס וללאַמקאָ עקססעפּטעור.

נומער 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קאָמפּאָנענט.

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>

דורך דזשאַוואַסקריפּט

נאָך אַדינג position: relative;דיין CSS, רופן די סקראָלספּי דורך דזשאַוואַסקריפּט:

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

ריזאַלווד שייַן טאַרגאַץ פארלאנגט

נאַוובאַר פֿאַרבינדונגען מוזן האָבן ריזאַלווד שייַן טאַרגאַץ. פֿאַר בייַשפּיל, אַ <a href="#home">home</a>מוזן שטימען צו עפּעס אין די DOM ווי <div id="home"></div>.

ניט- `:visible`ציל עלעמענטן איגנאָרירט

ציל עלעמענטן וואָס זענען נישט :visibleלויט jQuery וועט זיין איגנאָרירט און זייער קאָראַספּאַנדינג נאַוו ייטאַמז וועט קיינמאָל זיין כיילייטיד.

מעטהאָדס

`.scrollspy('refresh')`

ווען איר נוצן סקראָלספּי אין קאַנדזשאַנגקשאַן מיט אַדינג אָדער רימוווינג עלעמענטן פון די DOM, איר דאַרפֿן צו רופן דעם דערפרישן אופֿן ווי אַזוי:

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

`.scrollspy('dispose')`

דיסטרויז אַן עלעמענט ס סקראָלספּי.

אָפּציעס

אָפּציעס קענען זיין דורכגעגאנגען דורך דאַטן אַטריביוץ אָדער דזשאַוואַסקריפּט. פֿאַר דאַטן אַטריביוץ, צולייגן די אָפּציע נאָמען צו data-, ווי אין data-offset="".

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
אָפסעט	נומער	10	פּיקסעלס צו פאָטאָ פון שפּיץ ווען קאַלקיאַלייטינג שטעלע פון מעגילע.

געשעענישן

געשעעניש טיפּ	באַשרייַבונג
אַקטאַווייט.בס.סקראָלספּי	דער געשעעניש פירט אויף די מעגילע עלעמענט ווען אַ נייַ נומער ווערט אַקטיווייטיד דורך די סקראָלספּי.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something…
})

סקראָלספּי

וויאזוי עס ארבעט

בייַשפּיל אין נאַוובאַר

@פעט

@מדאָ

one

two

three

בייַשפּיל מיט נעסטעד נאַוויגאַציע

נומער 1

נומער 1-1

נומער 2-2

Item 2

Item 3

Item 3-1

Item 3-2

בייַשפּיל מיט רשימה-גרופּע

נומער 1

נומער 2

נומער 3

נומער 4

באַניץ

דורך דאַטן אַטריביוץ

דורך דזשאַוואַסקריפּט

ריזאַלווד שייַן טאַרגאַץ פארלאנגט

ניט- :visibleציל עלעמענטן איגנאָרירט

מעטהאָדס

.scrollspy('refresh')

.scrollspy('dispose')

אָפּציעס

געשעענישן

ניט- `:visible`ציל עלעמענטן איגנאָרירט

`.scrollspy('refresh')`

`.scrollspy('dispose')`