in English

Scrollspy

“Bootstrap” nawigasiýasyny awtomatiki usulda täzeläň ýa-da häzirki baglanyşykda haýsy baglanyşygyň işjeňdigini görkezmek üçin aýlaw ýagdaýyna esaslanýan topar böleklerini sanaň.

Bu nähili işleýär

Scrollspy-nyň dogry işlemegi üçin birnäçe talaplar bar:

  • JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýärutil.js .
  • “Bootstrap nav” komponentinde ýa-da sanaw toparynda ulanylmaly .
  • Scrollspy position: relative;içalyçylyk edýän elementiňize, adatça <body>.
  • Ondan başga elementlere içalyçylyk edeniňizde , toplumyň we ulanyljakdygyna <body>göz ýetiriň .heightoverflow-y: scroll;
  • Gämi ( <a>) talap edilýär we şonuň bilen bir elementi görkezmeli id.

Üstünlikli durmuşa geçirilende, deňiz ýa-da sanaw toparyňyz .activedegişli maksatlara esaslanyp synpy bir elementden beýlekisine geçirer.

Deňiz panelinde mysal

Deňiz paneliniň aşagyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň. Açylýan zatlar hem görkeziler.

@fat

Scrollspy mysaly üçin ýer eýesi mazmuny. Iň oňat arhitektura aldyňyz. Pasport markalary, ol kosmopolit. Gowy, täze, gazaply, biz ony gulpladyk. Hiç haçan bir gün seni ýitirjekdigimi meýilleşdirmedim. Yourüregiňizi iýýär. Öpüşiňiz kosmiki, her hereket jadyly. Olary göz öňünde tutýaryn, edil özi ýaly. Salam ýakynlar bilen salamlaşalyň. Diňe 4-nji iýul ýaly gijä eýe boluň! Youöne isrip bolmagyňyzy isleýärsiňiz.

@mdo

Scrollspy mysaly üçin ýer eýesi mazmuny. Sebäbi ol muzeý we hudo .nik. (Ine, şeýle edýäris) Şonuň üçin jady bilen oýnamak isleýärsiňiz. Şonuň üçin hemmesini maňa bermezden ozal anyklaň. Men ýöräp barýaryn, howada ýöräp barýaryn (şu gije). Gepleşigi taşlaň, hemmesini eşitdiňiz, pyýada ýöremäge wagt.

biri

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

Scrollspy mysaly üçin ýer eýesi mazmuny. Tans etmek isleseňiz, hemmesini isleseňiz, meniň jaň etmeli gyzdygymy bilýärsiňiz. Tüweleýden geçerdim. Şonuň üçin sizi doglan günüň kostýumyna getirmäge rugsat ediň. Gaçýan Geçen anna güni agşam, hawa, kanuny bozduk öýdýärin, hemişe durarys diýýäris. 'Sebäbi ol biraz okooko, biraz' Aý ýok ​​'. Eňegiň damjasy ', göz poppin', kelläň öwrümi ', bedeniň şokini' isleýärin. Hawa, kredit kartoçkalarymyzy ulaldyp, bardan kowduk.

Gowy ölçeg üçin başga-da ýer eýeleriniň mazmuny.

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

Içindäki deňiz bilen mysal

Scrollspy höwürtgelenen .navs bilen hem işleýär. Höwürtgelenen .navbolsa .active, ene-atasy hem bolar .active. Deňiz paneliniň gapdalyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň.

1-nji bent

Scrollspy mysaly üçin ýer eýesi mazmuny. Bu 1-nji element bilen baglanyşykly. Sizi beýiklige, şeýle beýiklige çykarýar, sebäbi ol halkara ýylgyryşyna eýe boldy. Bedatan ýerimde nätanyş bir adam bar, kellämde bir zat bar. Ay Ýok. Başga bir durmuşda seni galmaga mejbur ederdim. 'Sebäbi men, islendik zada ukyply. Täç söweşime taýýar. Ene-ataňyzyň içgisini ogurlamak we üçege çykmak üçin ulanylýar. Saz, sazlaşykly we taýýar, ony açyň, gettiniň agyr bolmagyna sebäp bolýar. Söýgüsi neşe ýalydyr. Saýlawymy ýatdan çykardym öýdýän.

1-1-nji bent

Scrollspy mysaly üçin ýer eýesi mazmuny. Bu 1-1-nji element bilen baglanyşykly. Iň oňat arhitektura aldyňyz. Pasport markalary, ol kosmopolit. Gowy, täze, gazaply, biz ony gulpladyk. Hiç haçan bir gün seni ýitirjekdigimi meýilleşdirmedim. Yourüregiňizi iýýär. Öpüşiňiz kosmiki, her hereket jadyly. Olary göz öňünde tutýaryn, edil özi ýaly. Salam ýakynlar bilen salamlaşalyň. Diňe 4-nji iýul ýaly gijä eýe boluň! Youöne isrip bolmagyňyzy isleýärsiňiz.

1-2-nji bent

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

Scrollspy mysaly üçin ýer eýesi mazmuny. Bu 3-2-nji elemente degişlidir. Siz asyl, çalşyp bolmaýar Bütin gije aýdym aýdýarlar. Kaliforniýaly gyzlar inkär edip bolmaýar. Kafesiz guş ýaly. Indi gorky ýok, goýberiň we erkin boluň, men sizi şertsiz söýerin. Diwardaky ýazgyny görüp bilýärin. Dünýäni gezip bilersiňiz, ýöne altyn kenara hiç zat ýakynlaşmaýar.

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

Sanaw topary bilen mysal

Scrollspy .list-groups bilen hem işleýär. Sanaw toparynyň gapdalyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň.

1-nji bent

Scrollspy sanaw-topar mysaly üçin ýer eýesi mazmuny. Bu 1-nji bent bilen baglanyşykly. Ötünç soramagyň zerurlygy ýok. Indi gorky ýok, goýberiň we erkin boluň, men sizi şertsiz söýerin. Geçen anna güni gije. Utanjaň mähirli adam bolma, men owadan diýip jedel ederin. Orta mekdepden soň tomus ilkinji gezek tanyşanymyzda. Sebäbi ol muzeý we hudo .nik. Näme? Garaş. Kadadan çykdym öýdüpdim.

2-nji bent

Scrollspy sanaw-topar mysaly üçin ýer eýesi mazmuny. Bu 2-nji elemente degişlidir. Hawa, öz aýdymy bilen tans edýär. Ay Ýok. Iň beýik bolup bilersiňiz 'Sebäp, balam, sen feýerwerk. Allhli gapylaryň ýapylmagynyň bir sebäbi bolup biler. Heartüregiňizi açyň we başlaň. Très chic, hawa, ol klassik.

3-nji bent

Scrollspy sanaw-topar mysaly üçin ýer eýesi mazmuny. Bu 3-nji elemente degişlidir. Biz has ýokary we has ýokary gidýäris. Hiç haçan beýlekisiz, şertnama baglaşdyk. Men efirde ýöräp barýaryn Kimdir biri seniň tatuyňy aýyrdyň diýdi. Indi kebelek ýaly ýüzýärin. Saz, sazlaşykly we taýýar, ony açyň, gettiniň agyr bolmagyna sebäp bolýar. Sebäbi meniňki bolanyňdan, bir gezek meniňki bolanyňdan. Diňe ýagtylygy ýakyp, şöhle saçmaly! Şeýdip, bulwary basdyk. Hiç wagt duýmaýarsyňyzmy, gaty kagyz duýýarsyňyzmy? Hemmesini görýärin, häzir görýärin.

4-nji bent

Scrollspy sanaw-topar mysaly üçin ýer eýesi mazmuny. Bu 4-nji elemente degişlidir. Ilkinji tanyşanymyzda orta mekdepden soň tomus. Indi gorky ýok, goýberiň we erkin boluň, men sizi şertsiz söýerin. Gün bilen öpülen deri gaty yssy, popsikliňizi erederis. Bu söýgi sizi ýokary derejä çykarar.

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

Ulanylyşy

Maglumat atributlary arkaly

Topbar nawigasiýaňyza skrollspy häsiýetini aňsatlyk bilen goşmak data-spy="scroll"üçin içaly bolmak isleýän elementiňize goşuň (köplenç bu şeýle bolar <body>). Soňra islendik Bootstrap komponentiniň data-targetesasy elementiniň ID ýa-da synpy bilen atribut goşuň..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>

JavaScript arkaly

CSS-ä goşanyňyzdan soň position: relative;, JavaScript arkaly scrollspy jaň ediň:

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

Çözüp bolýan ID nyşanlary talap edilýär

Navbar baglanyşyklarynda çözülip bilinýän ID nyşanlary bolmaly. Mysal üçin, <a href="#home">home</a>DOM-daky ýaly bir zada laýyk bolmaly <div id="home"></div>.

Maksat däl :visibleelementler hasaba alynmady

:visibleJQuery-a laýyk gelmeýän nyşan elementleri hasaba alynmaz we degişli deňiz elementleri hiç haçan tapawutlandyrylmaz.

Usullar

.scrollspy('refresh')

DOM-dan elementleri goşmak ýa-da aýyrmak bilen bilelikde scrollspy ulananyňyzda, täzeleniş usulyna şeýle jaň etmeli bolarsyňyz:

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

.scrollspy('dispose')

Bir elementiň aýlawyny ýok edýär.

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-offset="".

Ady Görnüşi Bellenen Düşündiriş
ofset sany 10 Aýlanyş ýagdaýyny hasaplanyňyzda ýokardan ýapyljak pikseller.
usuly setir awtoulag Içaly elementiň haýsy bölümdedigini tapýar. autoAýlamak koordinatlaryny almak üçin iň oňat usuly saýlar. offsetaýlaw koordinatlaryny almak üçin jQuery ofset usulyny ulanar. positionaýlaw koordinatlaryny almak üçin jQuery pozisiýa usulyny ulanar.
nyşana setir | jQuery obýekti | DOM elementi Scrollspy pluginini ulanmak üçin elementi kesgitleýär.

Wakalar

Çäräniň görnüşi Düşündiriş
işjeňleşdirmek.bs.scrollspy Bu waka, haçan-da täze bir zat scrollspy tarapyndan işjeňleşdirilse, aýlaw elementine ýanýar. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})