in English

Scrollspy

Përditësoni automatikisht navigimin e Bootstrap ose listoni komponentët e grupit bazuar në pozicionin e lëvizjes për të treguar se cila lidhje është aktualisht aktive në portin e shikimit.

Si punon

Scrollspy ka disa kërkesa për të funksionuar siç duhet:

  • Nëse po ndërtoni JavaScript-in tonë nga burimi, ai kërkonutil.js .
  • Duhet të përdoret në një komponent navigues ose grup liste të Bootstrap .
  • Scrollspy kërkon position: relative;elementin që po spiunoni, zakonisht <body>.
  • Kur spiunoni elementë të ndryshëm nga <body>, sigurohuni që të keni një heightgrup dhe të overflow-y: scroll;aplikoni.
  • Ankorat ( <a>) janë të nevojshme dhe duhet të tregojnë një element me atë id.

Kur të zbatohet me sukses, navi juaj ose grupi i listës do të përditësohet në përputhje me rrethanat, duke e zhvendosur .activeklasën nga një artikull në tjetrin bazuar në objektivat e tyre të lidhur.

Shembull në navbar

Lëvizni zonën poshtë shiritit të navigimit dhe shikoni ndryshimin e klasës aktive. Artikujt e zbritjes do të theksohen gjithashtu.

@yndyrë

Përmbajtja e mbajtësit të vendit për shembullin scrollspy. Ju keni arkitekturën më të mirë. Vula e pasaportës, ajo është kozmopolite. Mirë, e freskët, e ashpër, e morëm në kyçje. Nuk e kisha planifikuar kurrë që një ditë do të të humbja. Ajo të ha zemrën. Puthja juaj është kozmike, çdo lëvizje është magji. Dua të them ato, dua të them sikur ajo është ajo. Përshëndetje të dashur, le të bëjmë një udhëtim. Mjafton të zotëroni natën si 4 korriku! Por ju më mirë do të humbisni.

@mdo

Përmbajtja e mbajtësit të vendit për shembullin scrollspy. Sepse ajo është muza dhe artistja. (Kështu bëjmë ne) Pra, ju dëshironi të luani me magji. Pra, sigurohuni para se të më jepni të gjitha. Unë jam duke ecur, unë jam duke ecur në ajër (sonte). Kapërceni bisedën, i dëgjuat të gjitha, koha për të ecur në këmbë.

një

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

Përmbajtja e mbajtësit të vendit për shembullin scrollspy. Nëse doni të kërceni, nëse doni të gjitha, ju e dini se unë jam vajza që duhet të thërrisni. Do të ecja nëpër stuhi. Kështu që më lër të të marr me kostumin e ditëlindjes. Ai qe u largua. Të premten e kaluar mbrëma, po, mendoj se kemi shkelur ligjin, gjithmonë thuaj se do të ndalojmë. Sepse ajo është pak e Yokos, dhe ajo është pak e 'Oh jo'. Unë dua që nofullën të bjerë, syri, kokën të kthehet, trupi të tronditet. Po, ne maksimizuam kartat tona të kreditit dhe u dëbuam nga lokali.

Dhe disa më shumë përmbajtje mbajtëse vendesh, për masë të mirë.

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

Shembull me navin e mbivendosur

Scrollspy gjithashtu punon me .navs të mbivendosur. Nëse një fole .navështë .active, prindërit e tij do të jenë gjithashtu .active. Lëvizni zonën pranë shiritit të navigimit dhe shikoni ndryshimin e klasës aktive.

Pika 1

Përmbajtja e mbajtësit të vendit për shembullin scrollspy. Kjo lidhet me artikullin 1. Të çon milje lart, aq lart, sepse ajo ka një buzëqeshje ndërkombëtare. Ka një të huaj në shtratin tim, ka një goditje në kokë. Oh, jo. Në një jetë tjetër do të bëja të qëndroni. Sepse unë, unë jam i aftë për çdo gjë. I përshtatshëm për betejën time të kurorëzimit. Përdoret për të vjedhur pije alkoolike të prindërve tuaj dhe për t'u ngjitur në çati. Toni, i nxirë dhe i gatshëm, kthejeni atë duke bërë që të bëhet i rëndë. Dashuria e saj është si një drogë. Mendoj se harrova se kisha një zgjedhje.

Pika 1-1

Përmbajtja e mbajtësit të vendit për shembullin scrollspy. Kjo lidhet me artikullin 1-1. Ju keni arkitekturën më të mirë. Vula e pasaportës, ajo është kozmopolite. Mirë, e freskët, e ashpër, e morëm në kyçje. Nuk e kisha planifikuar kurrë që një ditë do të të humbja. Ajo të ha zemrën. Puthja juaj është kozmike, çdo lëvizje është magji. Dua të them ato, dua të them sikur ajo është ajo. Përshëndetje të dashur, le të bëjmë një udhëtim. Mjafton të zotëroni natën si 4 korriku! Por ju më mirë do të humbisni.

Pika 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

Përmbajtja e mbajtësit të vendit për shembullin scrollspy. Kjo lidhet me pikën 3-2. Jeni origjinal, nuk mund të zëvendësohet. Gjithë natën po luajnë, kënga jote. Vajzat e Kalifornisë ne jemi të pamohueshëm. Si një zog pa kafaz. Nuk ka frikë tani, lëshohu dhe bëhu i lirë, do të të dua pa kushte. Unë mund të shoh shkrimin në mur. Mund të udhëtosh nëpër botë, por asgjë nuk i afrohet bregut të artë.

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

Shembull me listë-grup

Scrollspy gjithashtu punon me .list-groups. Lëvizni zonën pranë grupit të listës dhe shikoni ndryshimin e klasës aktive.

Pika 1

Përmbajtja e mbajtësit të vendeve për shembullin e grupit të listës scrollspy. Kjo lidhet me pikën 1. Nuk keni nevojë për falje. Nuk ka frikë tani, lëshohu dhe bëhu i lirë, do të të dua pa kushte. Mbrëmja e së premtes së kaluar. Mos ji një tip i turpshëm, do të vë bast se është e bukur. Vera pas shkollës së mesme kur u takuam për herë të parë. Sepse ajo është muza dhe artistja. Çfarë? Prisni. Mendova se isha përjashtim.

Pika 2

Përmbajtja e mbajtësit të vendeve për shembullin e grupit të listës scrollspy. Kjo lidhet me pikën 2. Po, ajo kërcen me ritmin e saj. Oh, jo. Mund të kishit qenë më i madhi. Sepse, fëmijë, ti je një fishekzjarrë. Ndoshta një arsye pse të gjitha dyert janë të mbyllura. Hapeni zemrën tuaj dhe thjesht lëreni të fillojë. Pra très chic, po, ajo është një klasike.

Pika 3

Përmbajtja e mbajtësit të vendeve për shembullin e grupit të listës scrollspy. Kjo lidhet me pikën 3. Ne shkojmë gjithnjë e më lart. Asnjëherë njëra pa tjetrën, bëmë një pakt. Unë jam duke ecur në ajër. Dikush tha që ju hoqët tatuazhin tuaj. Tani unë po notoj si një flutur. Toni, i nxirë dhe i gatshëm, kthejeni atë duke bërë që të bëhet i rëndë. Sepse një herë je i imi, një herë je i imi. Thjesht duhet të ndizni dritën dhe ta lini të shkëlqejë! Kështu që ne goditëm bulevardin. A ndiheni ndonjëherë, ndiheni kaq të hollë letre. Unë i shoh të gjitha, e shoh tani.

Pika 4

Përmbajtja e mbajtësit të vendeve për shembullin e grupit të listës scrollspy. Kjo lidhet me pikën 4. Vera pas shkollës së mesme kur u takuam për herë të parë. Nuk ka frikë tani, lëshohu dhe bëhu i lirë, do të të dua pa kushte. Lëkura e puthitur nga dielli aq e nxehtë sa do të shkrijmë kokoshkat tuaja. Kjo dashuri do t'ju bëjë të fluturoni.

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

Përdorimi

Nëpërmjet atributeve të të dhënave

Për të shtuar me lehtësi sjelljen e scrollspy në navigimin tuaj të shiritit të sipërm, shtoni data-spy="scroll"te elementi që dëshironi të spiunoni (më së shpeshti kjo do të ishte <body>). Më pas shtoni data-targetatributin me ID-në ose klasën e elementit prind të çdo .navkomponenti 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>

Përmes JavaScript

Pasi të shtoni position: relative;në CSS tuaj, telefononi scrollspy përmes JavaScript:

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

Kërkohen objektiva ID të zgjidhshme

Lidhjet e Navbarit duhet të kenë objektiva identifikues të zgjidhshëm. Për shembull, një <a href="#home">home</a>duhet të korrespondojë me diçka në DOM si <div id="home"></div>.

Elementet :visibleqë nuk synojnë janë injoruar

Elementet e synuar që nuk janë :visiblesipas jQuery do të shpërfillen dhe artikujt e tyre përkatës navigues nuk do të theksohen kurrë.

Metodat

.scrollspy('refresh')

Kur përdorni scrollspy në lidhje me shtimin ose heqjen e elementeve nga DOM, do t'ju duhet të telefononi metodën e rifreskimit si kjo:

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

.scrollspy('dispose')

Shkatërron rrotullimin e një elementi.

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset="".

Emri Lloji E paracaktuar Përshkrim
kompensuar numri 10 Piksele për t'u zhvendosur nga lart kur llogaritni pozicionin e rrotullës.
metodë varg auto Gjen se në cilin seksion ndodhet elementi i spiunuar. autodo të zgjedhë metodën më të mirë për të marrë koordinatat e lëvizjes. offsetdo të përdorë metodën jQuery offset për të marrë koordinatat e lëvizjes. positiondo të përdorë metodën e pozicionit jQuery për të marrë koordinatat e lëvizjes.
objektiv varg | Objekti jQuery | Elementi DOM Përcakton elementin për të aplikuar shtesën Scrollspy.

Ngjarjet

Lloji i ngjarjes Përshkrim
aktivizoj.bs.scrollspy Kjo ngjarje ndizet në elementin e lëvizjes sa herë që një artikull i ri aktivizohet nga scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})