in English

Scrollspy

Nuashonraigh go huathoibríoch nascleanúint Bootstrap nó liostaigh comhpháirteanna grúpa bunaithe ar shuíomh an scrolla chun a chur in iúl cén nasc atá gníomhach san amharclann faoi láthair.

Conas a oibríonn sé

Tá roinnt riachtanas ag Scrollspy chun feidhmiú i gceart:

  • Má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.js .
  • Ní mór é a úsáid ar chomhpháirt nascleanúna Bootstrap nó ar ghrúpa liostaí .
  • Éilíonn Scrollspy position: relative;ar an eilimint a bhfuil tú ag spying air, de ghnáth an <body>.
  • Nuair a spying ar eilimintí eile seachas an <body>, a bheith cinnte go bhfuil heightsraith agus overflow-y: scroll;i bhfeidhm.
  • Tá ancairí ( <a>) ag teastáil agus ní mór dóibh gné a chur in iúl leis sin id.

Nuair a chuirtear i bhfeidhm go rathúil é, déanfaidh do ghrúpa nascleanúna nó liostaí nuashonrú dá réir, ag bogadh an .activerang ó mhír amháin go dtí an chéad cheann eile bunaithe ar na spriocanna a bhaineann leo.

Sampla i navbar

Scrollaigh an limistéar faoi bhun an bharra nascleanúna agus féach ar an athrú gníomhach ranga. Cuirfear béim ar na míreanna anuas freisin.

@saille

Ábhar placeholder don sampla scrollspy. Tá an ailtireacht is fearr agat. Stampaí pas, tá sí cosmopolitan. Mín, úr, fíochmhar, fuaireamar faoi ghlas é. Níor bheartaigh riamh go mbeadh lá amháin á chailliúint agam. Itheann sí do chroí amach. Tá do phóg Cosmaí, tá gach gluaiseacht draíochta. Ciallaíonn mé na cinn, ciallóidh mé mar tá sí an ceann. Beannachtaí a ngaolta déanaimis turas. Níl le déanamh ach an oíche a bheith agat mar an 4 Iúil! Ach b'fhearr leat dul amú.

@mdo

Ábhar placeholder don sampla scrollspy. 'Is í an muse agus an t-ealaíontóir í. (Seo mar a dhéanaimid) Mar sin is mian leat imirt le draíocht. Mar sin bí cinnte sula dtugann tú é go léir dom. Tá mé ag siúl, tá mé ag siúl ar aer (anocht). Léim an chaint, chuala sé ar fad, am chun siúl ar an siúlóid.

aon

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

Ábhar placeholder don sampla scrollspy. Más mian leat rince, más mian leat go léir, tá a fhios agat go bhfuil mé an cailín ar chóir duit glaoch. Siúil tríd an stoirm ba mhaith liom. Mar sin lig dom tú a chur i do chulaith lá breithe. An ceann a d'éirigh as. Oíche Dé hAoine seo caite, yeah sílim gur bhris muid an dlí, a rá i gcónaí go bhfuil muid ag dul a stopadh. 'Cause tá sí beagán de Yoko, Agus tá sí beagán de 'Oh no'. Ba mhaith liom an jaw droppin', eye poppin', casadh ceann', turraing coirp'. Sea, d'uasmhéadaigh muid ár gcártaí creidmheasa agus fuaireamar ciceáil amach as an mbarra.

Agus roinnt ábhar áitsealbhóirí níos mó, le dea-bheart.

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

Sampla le nav neadaithe

Oibríonn Scrollspy freisin le neadaithe .navs. .navMá tá nead .active, beidh a thuismitheoirí freisin .active. Scrollaigh an limistéar in aice leis an mbarra nascleanúna agus féach ar an athrú gníomhach ranga.

Mír 1

Ábhar placeholder don sampla scrollspy. Baineann an ceann seo le mír 1. Tógann sí míle ar airde thú, chomh hard sin, mar tá an aoibh gháire idirnáisiúnta amháin sin uirthi. Tá strainséir i mo leaba, tá puntáil i mo cheann. Ó níl. I saol eile chuirfinn ort fanacht. 'Cúis mé, tá mé in ann rud ar bith. Oiriúnach do mo cath corónach. A úsáidtear chun deoch do thuismitheoirí a ghoid agus tóg go dtí an díon. Ton, tan aclaí agus réidh, cas suas é faoi deara go bhfuil sé trom. Tá a grá cosúil le druga. Ceapaim go ndearna mé dearmad go raibh rogha agam.

Mír 1-1

Ábhar placeholder don sampla scrollspy. Baineann an ceann seo leis an mír 1-1. Tá an ailtireacht is fearr agat. Stampaí pas, tá sí cosmopolitan. Mín, úr, fíochmhar, fuaireamar faoi ghlas é. Níor bheartaigh riamh go mbeadh lá amháin á chailliúint agam. Itheann sí do chroí amach. Tá do phóg Cosmaí, tá gach gluaiseacht draíochta. Ciallaíonn mé na cinn, ciallóidh mé mar tá sí an ceann. Beannachtaí a ngaolta déanaimis turas. Níl le déanamh ach an oíche a bheith agat mar an 4 Iúil! Ach b'fhearr leat dul amú.

Mír 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

Ábhar placeholder don sampla scrollspy. Baineann an ceann seo le mír 3-2. Tá tú bunaidh, ní féidir é a ionadú. Gach oíche tá siad ag seinm, do amhrán. Cailíní California tá muid do shéanadh. Cosúil le héan gan cage. Níl eagla ar bith anois, lig as agus bí saor, beidh grá agam duit gan choinníoll. Is féidir liom an scríbhinn a fheiceáil ar an mballa. D’fhéadfá an domhan a thaisteal ach ní thagann aon rud gar don chósta órga.

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

Sampla le liosta-ghrúpa

Oibríonn Scrollspy freisin le .list-groups. Scrollaigh an limistéar in aice leis an ngrúpa liosta agus féach ar an athrú gníomhach ranga.

Mír 1

Ábhar sealbhóir áitribh don sampla liosta-grúpa scrollspy. Baineann an ceann seo le mír 1. Ní gá leithscéal a ghabháil. Níl eagla ar bith anois, lig as agus bí saor, beidh grá agam duit gan choinníoll. Oíche dé hAoine seo caite. Ná bheith ina fhear cúthail cineálta cuirfidh mé geall go bhfuil sé go hálainn. Samhradh tar éis na scoile ard nuair a bhuail muid ar dtús. 'Is í an muse agus an t-ealaíontóir í. Cad? Fan. Shíl mé go raibh mé an eisceacht.

Mír 2

Ábhar sealbhóir áitribh don sampla liosta-grúpa scrollspy. Baineann an ceann seo le mír 2. Sea, damhsaíonn sí dá buille féin. Ó níl. D'fhéadfá a bheith is mó. ‘Cúis, a bhabaí, is tine ealaíne thú. B’fhéidir fáth a bhfuil na doirse go léir dúnta. Oscail do chroí agus lig dó tosú. Mar sin très chic, yeah, tá sí ina clasaiceach.

Mír 3

Ábhar sealbhóir áitribh don sampla liosta-grúpa scrollspy. Baineann an ceann seo le mír 3. Téann muid níos airde agus níos airde. Ná ceann amháin gan an ceann eile, rinneamar comhaontú. Tá mé ag siúl ar an aer. Dúirt duine éigin gur baineadh do tatú as. Anois tá mé ag snámh cosúil le féileacán. Ton, tan aclaí agus réidh, cas suas é faoi deara go bhfuil sé trom. Cause nuair a bhíonn tú liom, nuair a bhíonn tú liom. Níl le déanamh agat ach an solas a lasadh agus ligean dó lasadh! Mar sin bhuaileamar an boulevard. An mbraitheann tú riamh, dar leat chomh tanaí páipéir. Feicim é ar fad, feicim anois é.

Mír 4

Ábhar sealbhóir áitribh don sampla liosta-grúpa scrollspy. Baineann an ceann seo le mír 4. Samhradh tar éis na scoile ard nuair a bhuaileamar ar dtús. Níl eagla ar bith anois, lig as agus bí saor, beidh grá agam duit gan choinníoll. Craiceann póg gréine chomh te sin leáimid do phóg. Cuirfidh an grá seo levitate tú.

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

Úsáid

Trí tréithe sonraí

Chun iompar scrollspy a chur le do nascleanúint barrbharra go héasca, cuir data-spy="scroll"leis an eilimint a bhfuil tú ag iarraidh spiaireacht a dhéanamh air (go hiondúil is é seo an <body>). Ansin cuir an data-targettréith leis an ID nó le haicme na máthaireiliminte d'aon .navchomhpháirt Bootstrap.

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>

Trí JavaScript

Tar éis position: relative;duit do CSS a chur isteach, cuir glaoch ar an scrollspy trí JavaScript:

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

Spriocanna aitheantais inréite ag teastáil

Caithfidh spriocanna aitheantais inréite a bheith ag naisc Navbar. Mar shampla, <a href="#home">home</a>ní mór a fhreagraíonn do rud éigin sa DOM cosúil le <div id="home"></div>.

Neamhaird :visibledéanta ar eilimintí neamhsprice

Ní thabharfar aird ar sprioc-eilimintí nach bhfuil :visiblede réir jQuery agus ní thaispeánfar a n-ítimí nascleanúna comhfhreagracha choíche.

Modhanna

.scrollspy('refresh')

Agus scrollspy in úsáid in éineacht le heilimintí a chur leis nó a bhaint den DOM, beidh ort an modh athnuachana a ghlaoch mar seo:

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

.scrollspy('dispose')

Scriosann scrollspy eilimint.

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-offset="".

Ainm Cineál Réamhshocrú Cur síos
fhritháireamh uimhir 10 Picteilíní le fritháireamh ón mbarr agus suíomh an scrolla á ríomh.
modh teaghrán gluaisteán Aimsítear cén chuid ina bhfuil an eilimint spied. autoroghnóidh sé an modh is fearr chun comhordanáidí scrollaithe a fháil. offsetúsáidfidh an modh fritháirimh jQuery chun comhordanáidí scrollaithe a fháil. positionúsáidfidh an modh suímh jQuery chun comhordanáidí scrollaithe a fháil.
sprioc teaghrán | réad jQuery | eilimint DOM Sonraítear eilimint chun breiseán Scrollspy a chur i bhfeidhm.

Imeachtaí

Cineál Imeachta Cur síos
ghníomhachtú.bs.scrollspy Buaileann an teagmhas seo an eilimint scrollbharra aon uair a ghníomhaíonn an scrollspy mír nua. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})