סקראָלספּי

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

אויף דעם בלאַט

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

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

עס מוזן זיין געוויינט אויף אַ Bootstrap נאַוו קאָמפּאָנענט אָדער רשימה גרופּע .
סקראָלספּי ריקווייערז position: relative;די עלעמענט איר ספּייינג אויף, יוזשאַוואַלי די <body>.
אַנגקערז ( <a>) זענען פארלאנגט און מוזן פונט צו אַן עלעמענט מיט דעם id.

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

סקראָללאַבלע קאַנטיינערז און קלאַוויאַטור אַקסעס

אויב איר מאַכן אַ סקראָללאַבלע קאַנטיינער (אנדערע ווי די <body>), זיין זיכער צו האָבן אַ heightסכום און overflow-y: scroll;געווענדט צו אים - צוזאמען אַ tabindex="0"צו ענשור קלאַוויאַטור אַקסעס.

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

ערשטער כעדינג

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

צווייטע קעפל

דריטע קעפל

פערטע קעפל

פינפטע קעפל

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

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

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

נומער 1

נומער 1-1

נומער 1-2

נומער 2

נומער 3

נומער 3-1

נומער 3-2

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <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 ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-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 ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="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>

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

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

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

נומער 1

נומער 2

נומער 3

נומער 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-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <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-bs-spy="scroll"צו די עלעמענט איר ווילן צו שפּיאָן אויף (רובֿ טיפּיקלי דאָס וואָלט זיין די <body>). דערנאָך לייגן דעם data-bs-targetאַטריביוט מיט די שייַן אָדער קלאַס פון די פאָטער עלעמענט פון קיין באָאָטסטראַפּ .navקאָמפּאָנענט.

body {
  position: relative;
}

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

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

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

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

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

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

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

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

מעטהאָדס

דערפרישן

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

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

פּאָטער

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

getInstance

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

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

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

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

אָפּציעס

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

נאָמען	טיפּ	פעליקייַט	באַשרייַבונג
`offset`	נומער	`10`	פּיקסעלס צו פאָטאָ פון שפּיץ ווען קאַלקיאַלייטינג שטעלע פון מעגילע.
`method`	שטריקל	`auto`	געפינט אין וואָס אָפּטיילונג די ספּייד עלעמענט איז, `auto`וועט קלייַבן דער בעסטער אופֿן צו באַקומען מעגילע קאָואָרדאַנאַץ. `offset`וועט נוצן דעם `Element.getBoundingClientRect()`אופֿן צו באַקומען מעגילע קאָואָרדאַנאַץ. `position`וועט נוצן די `HTMLElement.offsetTop`און `HTMLElement.offsetLeft`פּראָפּערטיעס צו באַקומען מעגילע קאָואָרדאַנאַץ.
`target`	שטריקל \| דזשקווערי כייפעץ \| DOM עלעמענט		ספּעסיפיעס עלעמענט צו צולייגן Scrollspy פּלוגין.

געשעענישן

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

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

סקראָלספּי

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

סקראָללאַבלע קאַנטיינערז און קלאַוויאַטור אַקסעס

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

ערשטער כעדינג

צווייטע קעפל

דריטע קעפל

פערטע קעפל

פינפטע קעפל

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

נומער 1

נומער 1-1

נומער 1-2

נומער 2

נומער 3

נומער 3-1

נומער 3-2

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

נומער 1

נומער 2

נומער 3

נומער 4

באַניץ

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

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

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

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

מעטהאָדס

דערפרישן

פּאָטער

getInstance

getOrCreateInstance

אָפּציעס

געשעענישן