in English

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

Diteng tša seswari sa lefelo bakeng sa mohlala wa scrollspy. O hweditše meago e mebotse kudu. Ditempe tša phasepoto, ke cosmopolitan. E botse, e foreše, e bogale, re e hweditše ka senotlelo. Never planned gore ka letšatši le lengwe ke tla be ke go lahlegelwa. O ja pelo ya gago ka ntle. Katlo ya gago ke ya cosmic, move o mongwe le o mongwe ke maleatlana. Ke ra bao, ke ra bjalo ka ge eka ke yena. Dumelang baratiwa a re tseeng leeto. E no ba mong wa bošego bjalo ka di 4 tša July! Eupša o ka rata go senywa.

@mdo

Diteng tša seswari sa lefelo bakeng sa mohlala wa scrollspy. 'Cause ke yena muse le artist.' (Ke ka fao re dirago ka gona) So you wanna play with magic. Ka fao e no kgonthišega pele o mpha ka moka. Ke a sepela, ke sepela moyeng (bošegong bjo). Tlolela polelo, e kwele ka moka, nako ya go sepela leeto.

tee

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

Diteng tša seswari sa lefelo bakeng sa mohlala wa scrollspy. If you wanna dance, ge o nyaka ka moka, o a tseba gore ke nna ngwanenyana yo o swanetšego go leletša mogala. Sepela ka ledimo leo ke bego ke tla lona. Ka fao e re ke go tsenye ka sutu ya gago ya letšatši la matswalo. Yo a ilego a phonyokga. Last Friday night, yeah ke nagana gore re robile molao, ka mehla re re re tlo ema. 'Cause ke Yoko ye nnyane, Gomme ke 'Oh no' ye nnyane. Ke nyaka mohlagare droppin ', leihlo poppin ', hlogo turnin ', mmele shockin '. Yeah, re maxed dikarata tša rena tša mokitlana gomme ra rakwa ka ntle ga bareng.

Le tše dingwe tše dingwe diteng tša seswari sa lefelo, bakeng sa tekanyo e botse.

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

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.

Diteng tša seswari sa lefelo bakeng sa mohlala wa scrollspy. Ye e amana le selo sa 1. E go tšea dimaele godimo, godimo kudu, ka gobane o na le pososelo yeo e tee ya boditšhabatšhaba. Go na le motho yo ke sa mo tsebego mpeteng wa ka, go na le go thula hlogong ya ka. Oo, aowa. Bophelong bjo bongwe ke be ke tla go dira gore o dule. 'Cause nna, ke na le bokgoni bja selo se sengwe le se sengwe. Go lokela ntwa ya ka ya go rweša mphapahlogo. E tlwaetše go utswa bjala bja batswadi ba gago gomme wa namela marulelong. Tone, tan fit le loketse, e retelehela ho fihlela e baka gettin 'boima lona. Lerato la gagwe le swana le sehlare-tagi. Ke nagana gore ke lebetše gore ke na le kgetho.

Ntlha ya 1-1

Diteng tša seswari sa lefelo bakeng sa mohlala wa scrollspy. Ye e amana le ntlha ya 1-1. O hweditše meago e mebotse kudu. Ditempe tša phasepoto, ke cosmopolitan. E botse, e foreše, e bogale, re e hweditše ka senotlelo. Never planned gore ka letšatši le lengwe ke tla be ke go lahlegelwa. O ja pelo ya gago ka ntle. Katlo ya gago ke ya cosmic, move o mongwe le o mongwe ke maleatlana. Ke ra bao, ke ra bjalo ka ge eka ke yena. Dumelang baratiwa a re tseeng leeto. E no ba mong wa bošego bjalo ka di 4 tša July! Eupša o ka rata go senywa.

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

Diteng tša seswari sa lefelo bakeng sa mohlala wa scrollspy. Ye e amana le ntlha 3-2. O original, o ka se tšeelwe legato. Bošego ka moka ba a bapala, koša ya gago. Banana ba California re sa ganetšege. Jwalo ka nonyana e se nang lesaka. Ga go na poifo bjale, tlogela o lokologe fela, ke tla go rata ntle le mabaka. Ke kgona go bona mongwalo lebotong. O be o ka sepela lefase eupša ga go selo seo se batamelago lebopong la gauta.

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

Diteng tša seswari sa lefelo bakeng sa mohlala wa lenaneo-sehlopha sa scrollspy. Ye e amana le ntlha 1. O se ke wa hloka tshwarelo. Ga go na poifo bjale, tlogela o lokologe fela, ke tla go rata ntle le mabaka. Labohlano le fetileng bosiu. Don't be a shy kinda guy ke tla becha gore e botse. Selemo ka morago ga sekolo se se phagamego ge re be re kopana la mathomo. 'Cause ke yena muse le artist.' Eng? Leta. O be a nagana gore ke nna mokgekolo.

Ntlha ya 2.

Diteng tša seswari sa lefelo bakeng sa mohlala wa lenaneo-sehlopha sa scrollspy. This one relates to item 2. Yeah, o bina ka beat ya gagwe. Oo, aowa. O ka be o bile yo mogolo kudu. 'Cause, ngwanaka, o sethunya sa mollo.' Mohlomongwe lebaka leo ka lona mejako ka moka e tswaletšwego. Bula pelo ya gago gomme o no e tlogele e thome. So très chic, ee, ke classic.

Ntlha ya 3

Diteng tša seswari sa lefelo bakeng sa mohlala wa lenaneo-sehlopha sa scrollspy. Ye e amana le ntlha ya 3. Re ya godimo le godimo. Le ka mohla e tee ntle le e nngwe, re ile ra dira kwano. Ke sepela moyeng. Motho o rile o tlošitšwe tattoo ya gago. Bjale ke phaphametše bjalo ka serurubele. Tone, tan fit le loketse, e retelehela ho fihlela e baka gettin 'boima lona. Cause once o le wa ka, once o le wa ka. O no swanelwa ke go gotetša seetša gomme o se tlogele se phadima! Ka gona re ile ra thula boulevard. Na o kile wa ikwa, o ikwa o sesane ga pampiri gakaakaa. Ke a e bona ka moka, ke a e bona bjale.

Ntlha ya 4.

Diteng tša seswari sa lefelo bakeng sa mohlala wa lenaneo-sehlopha sa scrollspy. Ye e amana le ntlha 4. Selemo ka morago ga sekolo se se phagamego ge re be re kopana la mathomo. Ga go na poifo bjale, tlogela o lokologe fela, ke tla go rata ntle le mabaka. Letlalo leo le atilwego ke letšatši le fiša kudu re tla qhibidiša popsicle ya gago. Lerato le le tla go dira gore o levitate.

<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 ya | jQuery selo sa | DOM elemente 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...
})