in English

Nwoma mmobɔwee

Yɛ Bootstrap navigation anaa list group components a egyina scroll gyinabea so no foforo ankasa de kyerɛ link a ɛreyɛ adwuma mprempren wɔ viewport no mu.

Sɛnea ɛyɛ adwuma

Scrollspy wɔ ahwehwɛde kakraa bi na ama ayɛ adwuma yiye:

  • Sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .
  • Ɛsɛ sɛ wɔde di dwuma wɔ Bootstrap nav component anaa list group so .
  • Scrollspy hwehwɛ position: relative;wɔ element a woreyɛ akwansra so no so, mpɛn pii no <body>.
  • Sɛ woreyɛ akwansrafo wɔ nneɛma afoforo a ɛnyɛ <body>, hwɛ hu sɛ wowɔ heightset na wode adi overflow-y: scroll;dwuma.
  • Ankora ( <a>) ho hia na ɛsɛ sɛ ɛkyerɛ element bi a ɛwɔ saa id.

Sɛ wɔde di dwuma yiye a, wo nav anaa list kuw no bɛsesa sɛnea ɛfata, de .activeadesuakuw no afi ade biako so akɔ foforo so a egyina wɔn botae ahorow a ɛbata ho so.

Nhwɛso wɔ navbar mu

Twe beae a ɛwɔ navbar no ase no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae. Wɔbɛtwe adwene asi nneɛma a ɛwɔ ase hɔ no so nso.

@kɛseɛ

Beaeɛ a ɛwɔ mu ma scrollspy nhwɛsoɔ no. Wo nsa kaa adansi ho nhyehyɛe a eye sen biara. Passport stamps, ɔyɛ cosmopolitan. Fine, fresh, fierce, yenyaa no wɔ lock so. Menyɛɛ nhyehyɛe da sɛ da bi mɛhwere wo. Ɔwe wo koma. Wo kiss yɛ cosmic, move biara yɛ nkonyaayi. Mekyerɛ wɔn no, mekyerɛ sɛ ɔno ne no. Nkyia adɔfo momma yɛntu kwan. Kɛkɛ wura anadwo no te sɛ 4th of July! Nanso wobɛpɛ sɛ wosɛe ade.

@mdo na ɔkyerɛwee

Beaeɛ a ɛwɔ mu ma scrollspy nhwɛsoɔ no. 'Cause ɔno ne muse ne artist no. (Eyi ne sɛnea yɛyɛ) Enti wopɛ sɛ wode nkonyaayi di agoru. Enti hwɛ yiye ara ansa na wode ne nyinaa ama me. Me nantew, me nantew wim (anadwo yi). Skip kasa no, ate ne nyinaa, bere a ɛsɛ sɛ wonantew nantew no.

baako

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

Beaeɛ a ɛwɔ mu ma scrollspy nhwɛsoɔ no. Sɛ wopɛ sɛ wosaw a, sɛ wopɛ ne nyinaa a, wunim sɛ me ne abeawa a ɛsɛ sɛ wofrɛ no. Nantew ahum a anka mɛbɔ no mu. Enti ma memfa wo nhyɛ w’awoda atade no mu. Nea onyaa ne ho. Last Friday night, yeah me susu sɛ yɛabu mmara so, bere nyinaa ka sɛ yɛbɛgyae. 'Cause ɔyɛ Yoko kakra, Na ɔyɛ 'Oh no' kakra. Mepɛ sɛ jaw droppin ', aniwa poppin ', ti turnin ', nipadua shockin '. Yeah, yɛ maxed yɛn credit cards na wɔpam yɛn fii bar no mu.

Na ebinom bio placeholder content, ma susudua pa.

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

Nhwɛso a ɛne nested nav

Scrollspy nso ne nested .navs yɛ adwuma. Sɛ nested bi .navyɛ a .active, n'awofo nso bɛyɛ .active. Twe beae a ɛwɔ navbar no nkyɛn no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae.

Adeɛ 1

Beaeɛ a ɛwɔ mu ma scrollspy nhwɛsoɔ no. This one relates to item 1. Fa wo akwansin a ɛkorɔn, a ɛkorɔn saa, 'cause she's got that one international smile. Ɔhɔho bi wɔ me mpa so, ɛrebɔ me tirim. Oh, dabi. Wɔ asetena foforo mu no anka mɛma woatra hɔ. 'Cause me, metumi ayɛ biribiara. Suiting up ma me abotiri ɔko no. Wɔtaa wia w’awofo nsa na woforo kɔ ɔdan no atifi. Tone, tan fit na ayɛ krado, dan no kɔ soro cause ne gettin 'heavy. Ne dɔ te sɛ nnubɔne. Misusuw sɛ me werɛ fii sɛ mewɔ biribi a mɛpaw.

Asɛm 1-1

Beaeɛ a ɛwɔ mu ma scrollspy nhwɛsoɔ no. Eyi fa ade 1-1 no ho. Wo nsa kaa adansi ho nhyehyɛe a eye sen biara. Passport stamps, ɔyɛ cosmopolitan. Fine, fresh, fierce, yenyaa no wɔ lock so. Menyɛɛ nhyehyɛe da sɛ da bi mɛhwere wo. Ɔwe wo koma. Wo kiss yɛ cosmic, move biara yɛ nkonyaayi. Mekyerɛ wɔn no, mekyerɛ sɛ ɔno ne no. Nkyia adɔfo momma yɛntu kwan. Kɛkɛ wura anadwo no te sɛ 4th of July! Nanso wobɛpɛ sɛ wosɛe ade.

Asɛm 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

Beaeɛ a ɛwɔ mu ma scrollspy nhwɛsoɔ no. Eyi fa ade 3-2 ho. Woyɛ original, wontumi nsi ananmu. Anadwo nyinaa wɔrebɔ, wo dwom. California mmeawa yɛyɛ nea wontumi nnye ho kyim. Te sɛ anomaa a onni afiri. Ehu biara nni hɔ seesei, gyae na fa wo ho kɛkɛ, mɛdɔ wo a biribiara nhyɛ mu. Mitumi hu nkyerɛwee a ɛwɔ ɔfasu no so no. Wubetumi atu kwan wɔ wiase nyinaa nanso biribiara nbɛn mpoano a ɛyɛ sika kɔkɔɔ no.

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

Nhwɛso a ɛne list-group

Scrollspy nso de .list-groups yɛ adwuma. Twe beae a ɛwɔ list kuw no nkyɛn no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae.

Adeɛ 1

Beaeɛ a ɛwɔ mu ma scrollspy list-group nhwɛsoɔ no. This one relates to item 1. Nhia kyɛwpa. Ehu biara nni hɔ seesei, gyae na fa wo ho kɛkɛ, mɛdɔ wo a biribiara nhyɛ mu. Fida a etwaam no anadwo. Don't be a shy kinda guy Me bɛ bet sɛ ɛyɛ fɛ. Awɔw bere mu bere a yɛapɔn ntoaso sukuu bere a edi kan a yehyiae no. 'Cause ɔno ne muse ne artist no. Dɛn? Twɛn. Misusuwii sɛ me na meyɛ soronko.

Adeɛ 2

Beaeɛ a ɛwɔ mu ma scrollspy list-group nhwɛsoɔ no. This one relates to item 2. Yeah, ɔsaw wɔ n’ankasa beat so. Oh, dabi. Anka wubetumi ayɛ nea ɔsen biara. ‘Cause, baby, woyɛ ogyaframa. Ebia biribi nti a wɔato apon no nyinaa mu. Bue wo koma mu na ma ɛnhyɛ ase kɛkɛ. Enti très chic, yeah, ɔyɛ classic.

Adeɛ 3

Beaeɛ a ɛwɔ mu ma scrollspy list-group nhwɛsoɔ no. Eyi fa ade 3. Yɛkɔ soro na yɛkɔ soro. Ɛnyɛ biako a ɔfoforo nka ho da, yɛyɛɛ apam. Menam wim. Obi kae sɛ woyii wo tattoo no. Seesei merehuruhuruw te sɛ ntontom. Tone, tan fit na ayɛ krado, dan no kɔ soro cause ne gettin 'heavy. Cause once wo yɛ me dea, once wo yɛ me dea. Wo kɛkɛ gotta ignite hann no na woma ɛhyerɛn! Enti yɛbɔɔ boulevard no so. So wote nka pɛn, te nka sɛ krataa yɛ teateaa saa. Mehu ne nyinaa, mehu no seesei.

Adeɛ 4

Beaeɛ a ɛwɔ mu ma scrollspy list-group nhwɛsoɔ no. This one relates to item 4. Awɔw bere akyi wɔ ntoaso sukuu bere a edi kan a yehyiae no. Ehu biara nni hɔ seesei, gyae na fa wo ho kɛkɛ, mɛdɔ wo a biribiara nhyɛ mu. Sun-kissed skin a ɛyɛ hyew araa ma yɛbɛbɔ wo popsicle no nwene. Saa ɔdɔ yi bɛma woayɛ 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>

Sɛnea wɔde di dwuma

Via data su ahorow so

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode scrollspy suban bɛka wo topbar navigation no ho a, fa ka data-spy="scroll"element a wopɛ sɛ wohwɛ so no ho (mpɛn pii no eyi bɛyɛ <body>). Afei fa data-targetattribute no ka ID anaa class a ɛwɔ ɔwofo element a ɛwɔ Bootstrap .navcomponent biara mu no ho.

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>

Ɛdenam JavaScript so

Sɛ wode position: relative;wo CSS no ka ho wie a, frɛ scrollspy no fa JavaScript so:

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

ID botae ahorow a wobetumi asiesie a ɛho hia

Ɛsɛ sɛ Navbar link ahorow no nya id botae ahorow a wobetumi asiesie. Sɛ nhwɛso no, <a href="#home">home</a>ɛsɛ sɛ a ne biribi a ɛwɔ DOM no mu te sɛ <div id="home"></div>.

Wɔabu :visiblewɔn ani agu nneɛma a ɛnyɛ botae so

Wɔbɛbu ani agu target elements a ɛnsɛ :visiblesɛ jQuery kyerɛ no so na wɔrensi wɔn nav nneɛma a ɛne no hyia no so dua da.

Akwan a wɔfa so yɛ

.scrollspy('refresh')

Sɛ wode scrollspy di dwuma de ka nneɛma a wode bɛka ho anaa woayi afi DOM no mu ho a, ɛho behia sɛ wofrɛ refresh kwan no te sɛ saa:

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

.scrollspy('dispose')

Ɔsɛe element bi scrollspy.

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-offset="".

Din Korɔ Mfiaseɛ Nkyerɛmu
offset a wɔde hyɛ mu nɔma 10. 10 Pixels to offset fi soro bere a worebu gyinabea a scroll no.
ɔkwan ahoma auto Finds which section the spied element is in. autobɛpaw ɔkwan a eye sen biara a wobɛfa so anya scroll coordinates. offsetde jQuery offset kwan no bedi dwuma de anya scroll coordinates. positionde jQuery gyinabea kwan no bedi dwuma de anya scroll coordinates.
deɛ ani si so ahama | jAsɛmmisa adeɛ | DOM element a ɛwɔ hɔ Kyerɛ element a wode bedi dwuma Scrollspy plugin.

Nsɛm a esisi

Nsɛm a Ɛsisii no Su Nkyerɛmu
yɛ adwuma.bs.scrollspy Saa adeyɛ yi tow ogya wɔ nhoma mmobɔwee element no so bere biara a ade foforo bi bɛyɛ adwuma denam nhoma mmobɔwee no so. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})