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.
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 nyaka
util.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 leheight
sete le gooverflow-y: scroll;
dirišwa. - Ditshetledi (
<a>
) di a nyakega gomme di swanetše go šupa elemente yeo e nago le seoid
.
Ge e phethagaditšwe ka katlego, sehlopha sa gago sa nav goba sa lenaneo se tla mpshafatša ka go swanela, sa šuthiša .active
sehlopha go tšwa go selo se tee go ya go se se latelago go ya ka diphetho tša bona tše di amanago.
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.
Scrollspy e šoma gape ka .nav
s yeo e tsentšwego ka gare ga sehlaga. Ge e ba nested .nav
e 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 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 consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor 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
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.
Scrollspy e šoma gape ka .list-group
s. 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.
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-target
seka ka ID goba sehlopha sa elemente ya motswadi ya karolo efe goba efe ya Bootstrap .nav
.
Ka morago ga go tlaleletša position: relative;
ka go CSS ya gago, bitša scrollspy ka JavaScript:
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 :visible
nepišo di hlokomologwa
Dielemente tša nepišo tšeo di sego :visible
go 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.
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:
E senya scrollspy ya elemente.
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. |
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. |