Source

Scrollspy ya go phuthwa

Mpshafatša ka go iketla go sepelasepela ga Bootstrap goba dikarolo tša sehlopha sa lenaneo go ya ka maemo a go sepelasepela go laetša gore ke kgokagano efe yeo e šomago gabjale ka go lefelo la go lebelela.

Kamoo e šomago ka gona

Scrollspy e na le dinyakwa tše mmalwa gore e šome gabotse:

  • Ge e ba o aga JavaScript ya rena go tšwa mothopong, e nyakautil.js .
  • E swanetše go šomišwa go karolo ya nav ya Bootstrap goba sehlopha sa lenaneo .
  • Scrollspy e nyaka position: relative;ka elemente yeo o e hlolago, gantši e <body>.
  • Ge o hlola dielemente tše dingwe ntle le <body>, kgonthišetša gore o na le heightsete le go overflow-y: scroll;dirišwa.
  • Ditshetledi ( <a>) di a nyakega gomme di swanetše go šupa elemente yeo e nago le seo id.

Ge e phethagaditšwe ka katlego, sehlopha sa gago sa nav goba sa lenaneo se tla mpshafatša ka go swanela, sa šuthiša .activesehlopha go tšwa go selo se tee go ya go se se latelago go ya ka diphetho tša bona tše di amanago.

Mohlala ka navbar

Scroll lefelo ka fase ga navbar gomme o lebelele phetogo ya sehlopha se se šomago. Diaetheme tša go theoga le tšona di tla hlaolwa.

@lekhura

Ad leggings keytar, brunch id bonono mokga dolor labore. Pitchfork yr enim lo-fi pele ba rekisa qui. Tumblr polasa-ho-tafoleng baesekele ditokelo eng kapa eng. Anim keffiyeh carles cardigan ya go swana le yona. Velit seitan mcsweeney o photo photo photo lephephe 3 phiri ngwedi irure. Cosby jesi lomo jean shorts, williamsburg hoodie minim qui mohlomong ha ua utloa ka bona et cardigan letlole la tšepo culpa biodiesel wes anderson botsebi. Nihil tattooed accusamus, cred kgegeo biodiesel keffiyeh mosebetsi oa matsoho ullamco consequat.

@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 blog, culpa mokotla wa moromiwa marfa eng kapa eng delectus lijo teraka. Sapiente synth id assumenda. Locavore sed helvetica cliche kgegeo, thundercats mohlomong ha ua utloa ka bona consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat pele ba rekisa, terry richardson proident brunch nesciunt quis cosby jesi pariatur keffiyeh ut helvetica mosebetsi oa matsoho. Cardigan mesebetsi ea matsoho biri seitan readymade velit. VHS chambray laboris veniam ya nakwana. Anim mollit minima commodo ullamco dikatse tsa diaduma.

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

Mohlala ka nested nav

Scrollspy e šoma gape ka .navs yeo e tsentšwego ka gare ga sehlaga. Ge e ba nested .nave le .active, batswadi ba yona le bona ba tla ba .active. Scroll lefelo kgauswi le navbar gomme o lebelele phetogo ya sehlopha se se šomago.

Ntlha 1.

Ex consequat commodo adipisicing go itšhidulla aute ntle le occaecat ullamco duis aliqua id magna ullamco eu. Dira aute ipsum ipsum ullamco cillum consectetur ut le aute consectetur mošomo wa go šoma. Fugiat laborum incididunt nakwana eu ditlamorago enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua le aliqua officia quis le incididunt voluptate bao e seng anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id id cupidatat lena le le leng le le leng le le le leng le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le lefe.

Ntlha ya 1-1

Amet nakwana mollit aliquip pariatur ntle le commodo dira ea cillum commodo Lorem le occaecat elit qui et. Aliquip go šoma ka thata ex ex esse voluptate occaecat Lorem ullamco lešoka. Aliqua cillum excepteur irure ditla-morago id quis ea. Dula proident ullamco aute magna pariatur go šoma ka dinko. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur ditlamorago eu commodo e tšhabilego non quis. Enim aliquip go itšhidulla ullamco adipisicing voluptate excepteur bonyane go itšhidulla bonyane minima commodo adipisicing go itšhidulla officia nisi adipisicing. Anim id duis qui consequat mošomo wa go adipisicing sint dolor elit cillum anim le go tšhaba.

Ntlha ya 1-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

Labore dula culpa commodo elit adipisicing dula aliquip elit proident voluptate bonyane mollit nostrud aute reprehenderit etsa. Mollit excepteur eu Lorem ipsum anim commodo sint mošomo Lorem ka go itšhidulla velit incididunt. Occaecat consectetur nisi ka occaecat proident minim enim sunt reprehenderit go itšhidulla cupidatat et dira officia. Aliquip consequat ad go šoma mošomo mollit ut amet. Dula pariatur nakwana proident ka veniam culpa aliqua ntle le 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 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>

Mohlala ka lenaneo-sehlopha

Scrollspy e šoma gape ka .list-groups. Scroll lefelo kgauswi le sehlopha sa lenaneo gomme o lebelele phetogo ya klase ye e šomago.

Ntlha 1.

Ex consequat commodo adipisicing go itšhidulla aute ntle le occaecat ullamco duis aliqua id magna ullamco eu. Dira aute ipsum ipsum ullamco cillum consectetur ut le aute consectetur mošomo wa go šoma. Fugiat laborum incididunt nakwana eu ditlamorago enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua le aliqua officia quis le incididunt voluptate bao e seng anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id id cupidatat lena le le leng le le leng le le le leng le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le le lefe.

Ntlha ya 2.

Quis magna Lorem ani amet ipsum dira mollit dula cillum voluptate ex nulla nakwana. Laborum consequat non elit enim go itšhidulla cillum aliqua ditlamorago id aliqua. Esse ex consectetur mollit voluptate est ka duis laboris e dutse e ipsum ani Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco lethopo la go dula enim elit aliqua esse irure. Laborum nisi sit est nakwana labourum mollit laboure officia laborum ntle le commodo non commodo dolor ntle le commodo. Ipsum fugiat ex est consectetur ipsum commodo nakwana sunt ka proident.

Ntlha ya 3

Quis ani dula dira amet fugiat dolor velit dula ea ea dira reprehenderit culpa duis. Nostrud aliqua ipsum fugiat bonyane proident occaecat ntle le aliquip culpa aute nakwana reprehenderit. Deserunt nakwana mollit elit ex pariatur dolore velit tšhabile mollit culpa irure ullamco est ex ullamco ntle le.

Ntlha ya 4.

Quis ani dula dira amet fugiat dolor velit dula ea ea dira reprehenderit culpa duis. Nostrud aliqua ipsum fugiat bonyane proident occaecat ntle le aliquip culpa aute nakwana reprehenderit. Deserunt nakwana mollit elit ex pariatur dolore velit tšhabile mollit culpa irure ullamco est ex ullamco ntle le.

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

Tšhomišo

Ka dika ya data

Go oketša gabonolo boitshwaro bja scrollspy go go sepelasepela ga gago ga topbar, oketša data-spy="scroll"go elemente yeo o nyakago go e hlola (ka tlwaelo kudu se e be e tla ba <body>). Ke moka o tlaleletše data-targetseka ka ID goba sehlopha sa elemente ya motswadi ya karolo efe goba efe ya Bootstrap .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>

Ka JavaScript

Ka morago ga go tlaleletša position: relative;ka go CSS ya gago, bitša scrollspy ka JavaScript:

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

Diphetho tša ID tšeo di ka rarollwago di a nyakega

Dikgokagano tša Navbar di swanetše go ba le diphetho tša id tšeo di ka rarollwago. Go fa mohlala, a e <a href="#home">home</a>swanetše go sepelelana le selo se sengwe ka go DOM go swana le <div id="home"></div>.

Dielemente tšeo e sego tša :visiblenepišo di hlokomologwa

Dielemente tša nepišo tšeo di sego :visiblego ya ka jQuery di tla hlokomologwa gomme dilo tša tšona tša nav tše di swanetšego di ka se tsoge di hlaotšwe.

Mekgwa ya go šoma

.scrollspy('refresh')

Ge o diriša scrollspy ka kopanelo le go tlaleletša goba go tloša dielemente go tšwa go DOM, o tla swanelwa ke go bitša mokgwa wa go hlabolla go swana le bjalo:

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

.scrollspy('dispose')

E senya scrollspy ya elemente.

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-offset="".

Leina Mohuta Hlokomologa Tlhalošo
offset nomoro 10. Dipiksele go offset go tšwa godimo ge o bala boemo bja go phurolla.
mokgwa thapo auto E hwetša gore ke karolo efe yeo elemente ya dihlodi e lego go yona e autotla kgetha mokgwa wo mokaone wa go hwetša dihlomathišo tša go kgokološa. offsettla sebelisa jQuery offset mokgwa wa ho fumana scroll dihlomathiso. positiontla diriša mokgwa wa boemo bja jQuery go hwetša dihlomathišo tša go kgokološa.
tebanyo thapo E laetša elemente ya go diriša polaka ya Scrollspy.

Ditiragalo

Mohuta wa Tiragalo Tlhalošo
tsenya tirišong.bs.scrollspy Tiragalo ye e thunya godimo ga elemente ya go phuthwa neng le neng ge selo se sefsa se thoma go šomišwa ke scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})