Source

Scrollspy

Bootstrap يولباشچىسى ياكى تىزىملىك گۇرۇپپىسىنىڭ زاپچاسلىرىنى سىيرىلما ئورۇنغا ئاساسەن ئاپتوماتىك يېڭىلاپ ، كۆرۈنۈشتە قايسى ئۇلىنىشنىڭ ئاكتىپ ئىكەنلىكىنى كۆرسىتىپ بېرىدۇ.

قانداق ئىشلەيدۇ

Scrollspy نىڭ نورمال ئىشلەش ئۈچۈن بىر قانچە تەلىپى بار:

ئەگەر JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇutil.js .
ئۇ چوقۇم Bootstrap nav زاپچاسلىرى ياكى تىزىملىك گۇرۇپپىسىدا ئىشلىتىلىشى كېرەك.
Scrollspy position: relative;سىز جاسۇسلۇق قىلىۋاتقان ئېلېمېنتنى تەلەپ قىلىدۇ <body>.
ئۇنىڭدىن باشقا ئېلېمېنتلارغا جاسۇسلۇق قىلغاندا <body>، چوقۇم بىر heightيۈرۈش ۋە overflow-y: scroll;قوللىنىشقا كاپالەتلىك قىلىڭ.
لەڭگەر ( <a>) تەلەپ قىلىنىدۇ ۋە چوقۇم بۇنىڭ بىلەن بىر ئېلېمېنتنى كۆرسىتىشى idكېرەك.

مۇۋەپپەقىيەتلىك يولغا قويۇلغاندا ، nav ياكى تىزىملىك گۇرۇپپىڭىز ماس ھالدا يېڭىلىنىدۇ ، .activeمۇناسىۋەتلىك نىشانغا ئاساسەن سىنىپنى بىر تۈردىن يەنە بىر تۈرگە يۆتكەيدۇ.

يولباشچىنىڭ ئاستىدىكى رايوننى سىيرىپ ئاكتىپ سىنىپ ئۆزگىرىشىنى كۆرۈڭ. چۈشۈش تۈرلىرىمۇ گەۋدىلىنىدۇ.

@fat

ئېلان بەلگە كۇنۇپكىسى ، چاتما id سەنئەت يىغىلىشى دولور ئەمگىكى. Pitchfork yr enim lo-fi ئۇلار سېتىلىپ بولغۇچە. Tumblr دېھقانچىلىق مەيدانىدىن ئۈستەلگە ۋېلىسىپىت ھوقۇقى نېمە. Anim keffiyeh carles cardigan. Velit seitan mcsweeney نىڭ رەسىم ئورنى 3 بۆرە ئايسىز. Cosby swater lomo jean كالتە ئىشتان ، ۋىللىيامسبۇرگ خۇدى مىننى كىي بەلكىم سىز ئۇلارنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن. نىھىل چەكمە ئەيىبلەش ، ئىناۋەتلىك بىيو دىزېل كېفىيە ھۈنەرۋەن ئۇللامكو ئاقىۋەت.

@mdo

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.

Keytar twee بىلوگى ، كۇلپا خەۋەرچى سومكىسى مارفا ھەر قانداق دېلېكتۇس يېمەكلىك يۈك ماشىنىسى. Sapiente synth id assnda. Locavore sed helvetica cliche مەسخىرە ، گۈلدۈرمامىلىق گۈلدۈرماما بەلكىم سىز ئۇلارنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن. ئۇلار سېتىلىشتىن بۇرۇن ئەمگەك كۈچى لاياقەتلىك جاي. كاردىگان ھۈنەر-سەنئەت پىۋىسى سەيتان تەييارلانغان مەخمەل. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco گۈلدۈرماما.

<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 بىلەن مىسال

Scrollspy ئۇۋىسى .navs بىلەنمۇ ئىشلەيدۇ. ئەگەر ئۇۋىسى .navبولسا .active، ئۇنىڭ ئاتا-ئانىسىمۇ بولىدۇ .active. يولباشچى يېنىدىكى رايوننى سىيرىپ ئاكتىپ سىنىپ ئۆزگىرىشىنى كۆرۈڭ.

1-تۈر

Ex ئاقىۋەت تاۋار ماسلاشتۇرۇش مەشىقى aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur ئەمگەك كۈچى قىلىڭ. Fugiat laborum incididunt tempor eu resultat enim dolore proident. Qui laborum do excepteur nulla magna eiusmod consectetur in. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Item 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure ئاقىۋەت id quis ea. ئولتۇرۇشلۇق ullamco aute magna pariatur nostrud ئەمگىكى. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur ئاقىۋەت eu commodo fugiat non quis. Enim aliquip چېنىقىش ullamco adipisising voluptate excepteur minim چېنىقتۇرۇش ئەڭ كىچىك تاۋار مەشىقى مەشىقى Anim id duis qui ئاقىۋەت ئەمگىكىگە ماس كېلىدىغان سىنت دولور elit cillum anim et fugiat.

Item 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 چېنىقىش velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit چېنىقىش cupidatat et do officia. Aliquip ئاقىۋەت ئېلان ئەمگەك كۈچى mollit ut amet. ۋېنىئام كۇلپا ئالۇكا سىرتىدا ئولتۇرۇش پارىيات ۋاقىتلىق ۋاقىتلىق ئولتۇرۇشلۇق elit magna fugiat eiusmod amet officia.

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

تىزىملىك-گۇرۇپپا بىلەن مىسال

Scrollspy يەنە .list-groups بىلەن ئىشلەيدۇ. تىزىملىك گۇرۇپپىسىنىڭ يېنىدىكى رايوننى سىيرىپ ئاكتىپ سىنىپ ئۆزگىرىشىنى كۆرۈڭ.

1-تۈر 2-تۈر 3-تۈر 4-تۈر

1-تۈر

2-تۈر

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. ئەمگەك كۈچى نەتىجىسىدە لاياقەتسىز بولغان چېنىقىش cillum aliqua ئاقىۋەت id aliqua. Esse ex consectetur mollit voluptate est 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.

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 temprerenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

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>). ئاندىن خاسلىقنى ھەر قانداق Bootstrap زاپچاسلىرىنىڭ 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>

JavaScript ئارقىلىق

CSS نى قوشقاندىن كېيىن position: relative;، JavaScript ئارقىلىق scrollspy غا تېلېفون قىلىڭ:

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

ھەل قىلىشقا بولىدىغان كىملىك نىشانلىرى تەلەپ قىلىنىدۇ

Navbar ئۇلىنىشىدا ھەل قىلغىلى بولىدىغان id نىشانلىرى بولۇشى كېرەك. مەسىلەن ، <a href="#home">home</a>چوقۇم DOM غا ئوخشاش نەرسىگە ماس كېلىشى كېرەك <div id="home"></div>.

نىشانسىز `:visible`ئېلېمېنتلار نەزەردىن ساقىت قىلىندى

:visibleJQuery غا ماس كەلمەيدىغان نىشان ئېلېمېنتلىرى نەزەردىن ساقىت قىلىنىدۇ ۋە ئۇلارنىڭ ماس كېلىدىغان تۈرلىرى ھەرگىز گەۋدىلەنمەيدۇ.

Methods

`.scrollspy('refresh')`

DOM دىكى ئېلېمېنتلارنى قوشۇش ياكى چىقىرىۋېتىش بىلەن بىللە scrollspy نى ئىشلەتكەندە ، يېڭىلاش ئۇسۇلىنى مۇنداق چاقىرىشىڭىز كېرەك:

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

`.scrollspy('dispose')`

بىر ئېلېمېنتنىڭ سىيرىلمىسىنى يوقىتىدۇ.

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-offset="".

ئىسمى	تىپ	سۈكۈتتىكى	چۈشەندۈرۈش
offset	سان	10	دومىلىما ئورۇننى ھېسابلىغاندا يۇقىرىدىن ئۆچۈرۈلىدىغان پىكسېل.

Events

پائالىيەت تىپى	چۈشەندۈرۈش
activate.bs.scrollspy	بۇ ھادىسە سىيرىلما ئېلېمېنت تەرىپىدىن قوزغىتىلىدۇ.

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

Scrollspy

قانداق ئىشلەيدۇ

Navbar دىكى مىسال

@fat

@mdo

one

two

three

ئۇۋىسى بولغان nav بىلەن مىسال

1-تۈر

Item 1-1

Item 2-2

Item 2

Item 3

Item 3-1

Item 3-2

تىزىملىك-گۇرۇپپا بىلەن مىسال

1-تۈر

2-تۈر

3-تۈر

4-تۈر

ئىشلىتىش

سانلىق مەلۇمات خاسلىقى ئارقىلىق

JavaScript ئارقىلىق

ھەل قىلىشقا بولىدىغان كىملىك ​​نىشانلىرى تەلەپ قىلىنىدۇ

نىشانسىز :visibleئېلېمېنتلار نەزەردىن ساقىت قىلىندى

Methods

.scrollspy('refresh')

.scrollspy('dispose')

تاللانما

Events

ھەل قىلىشقا بولىدىغان كىملىك نىشانلىرى تەلەپ قىلىنىدۇ

نىشانسىز `:visible`ئېلېمېنتلار نەزەردىن ساقىت قىلىندى

`.scrollspy('refresh')`

`.scrollspy('dispose')`