Umuzingo

Mu buryo bwikora kuvugurura Bootstrap kugendana cyangwa gutondekanya amatsinda yibice ukurikije umwanya wizingo kugirango werekane umurongo urimo gukora muburyo bwo kureba.

Kuriyi page

Uburyo ikora

Scrollspy ifite ibisabwa bike kugirango ikore neza:

Igomba gukoreshwa kuri Bootstrap nav ibice cyangwa urutonde rwitsinda .
Umuzingo usaba position: relative;kubintu urimo kuneka, mubisanzwe <body>.
Inanga ( <a>) irasabwa kandi igomba kwerekana ikintu hamwe nicyo id.

Mugihe ushyizwe mubikorwa neza, nav cyangwa urutonde rwitsinda rizavugurura bikurikije, kwimura .activeicyiciro kuva mubintu bikajya mubindi ukurikije intego zabo.

Ibikoresho bizunguruka hamwe na clavier yinjira

Niba urimo gukora ikintu kizunguruka (kitari icya <body>), menya neza ko ufite heightigenamigambi hanyuma overflow-y: scroll;ukagishyira mu bikorwa - hamwe na a tabindex="0"kugirango wemeze kwinjira kuri clavier.

Kuzenguruka agace kari munsi ya navbar hanyuma urebe ibyiciro bikora. Ibintu byamanutse bizagaragazwa kandi.

Umutwe wa mbere

Nibintu bimwe byabitswe kumwanya wurupapuro. Menya ko mugihe uzengurutse urupapuro, ihuza ryoguhuza ryerekanwe. Byasubiwemo murugero rwibigize. Turakomeza kongeramo izindi ngero kopi hano kugirango dushimangire kuzenguruka no kumurika.

Umutwe wa kabiri

Umutwe wa gatatu

Umutwe wa kane

Umutwe wa gatanu

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Urugero hamwe na nav

Scrollspy nayo ikorana na .navs. Niba icyari .navari .active, ababyeyi bayo nabo bazaba .active. Kuzenguruka agace kegereye navbar hanyuma urebe ibikorwa bikora bihinduka.

Ingingo ya 1

Ingingo 1-1

Ingingo ya 1-2

Ingingo ya 2

Ingingo ya 3

Ingingo 3-1

Ingingo ya 3-2

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <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 ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-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 ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="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>

Urugero hamwe nurutonde-itsinda

Scrollspy nayo ikorana na .list-groups. Kuzenguruka agace kari kuruhande rwurutonde hanyuma urebe impinduka zikora.

Ingingo ya 1 Ingingo ya 2 Ingingo ya 3 Ingingo ya 4

Ingingo ya 1

Ingingo ya 2

Ingingo ya 3

Ingingo ya 4

<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-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <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>

Ikoreshwa

Binyuze mu biranga amakuru

Kugirango wongere byoroshye imyitwarire ya scrollspy kumurongo wawe wo hejuru, ongera kubintu ushaka kuneka data-bs-spy="scroll"(mubisanzwe ibi byaba aribyo <body>). Noneho ongeraho data-bs-targetikiranga hamwe nindangamuntu cyangwa urwego rwibintu byababyeyi .navbigize Bootstrap.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Binyuze kuri JavaScript

Nyuma yo kongera position: relative;muri CSS yawe, hamagara umuzingo ukoresheje JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Intego z'indangamuntu zikemurwa zisabwa

Imiyoboro ya Navbar igomba kuba ifite intego id idakemuka. Kurugero, <a href="#home">home</a>hagomba guhura nibintu muri DOM nka <div id="home"></div>.

Ibintu bitagaragara intego yibintu birengagijwe

Intego yibintu bitagaragara izirengagizwa kandi ibintu bihuye nabyo ntibizigera bigaragara.

Uburyo

humura

Mugihe ukoresheje umuzingo ufatanije no kongera cyangwa gukuraho ibintu muri DOM, uzakenera guhamagara uburyo bushya nka gutya:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

guta

Gusenya ikintu cyizingo. (Kuraho amakuru yabitswe kubintu bya DOM)

Kubona

Uburyo buhagaze butuma ubona urugero rwa scrollspy ifitanye isano na DOM element

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

GetOrCreateInstance

Uburyo buhamye bugufasha kubona urugero rwa scrollspy ifitanye isano na DOM, cyangwa gukora bundi bushya mugihe itatangijwe

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-, Nka Muri data-bs-offset="".

Izina	Andika	Mburabuzi	Ibisobanuro
`offset`	umubare	`10`	Pixels kugirango uve hejuru iyo ubaze umwanya wumuzingo.
`method`	umugozi	`auto`	Shakisha igice igice cyubutasi kirimo. `auto`Bizahitamo uburyo bwiza bwo kubona imizingo. `offset`azakoresha `Element.getBoundingClientRect()`uburyo bwo kubona umuzingo uhuza. `position`izakoresha i `HTMLElement.offsetTop`na `HTMLElement.offsetLeft`imitungo kugirango ubone umuzingo uhuza.
`target`	umugozi \| Ikintu cyibibazo \| Ikintu cya DOM		Kugaragaza ikintu cyo gukoresha plugin ya Scrollspy.

Ibyabaye

Ubwoko bwibyabaye	Ibisobanuro
`activate.bs.scrollspy`	Ibirori birasa kumuzingo igihe cyose ikintu gishya gihinduwe na muzingo.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Umuzingo

Uburyo ikora

Ibikoresho bizunguruka hamwe na clavier yinjira

Urugero muri navbar

Umutwe wa mbere

Umutwe wa kabiri

Umutwe wa gatatu

Umutwe wa kane

Umutwe wa gatanu

Urugero hamwe na nav

Ingingo ya 1

Ingingo 1-1

Ingingo ya 1-2

Ingingo ya 2

Ingingo ya 3

Ingingo 3-1

Ingingo ya 3-2

Urugero hamwe nurutonde-itsinda

Ingingo ya 1

Ingingo ya 2

Ingingo ya 3

Ingingo ya 4

Ikoreshwa

Binyuze mu biranga amakuru

Binyuze kuri JavaScript

Intego z'indangamuntu zikemurwa zisabwa

Ibintu bitagaragara intego yibintu birengagijwe

Uburyo

humura

guta

Kubona

GetOrCreateInstance

Amahitamo

Ibyabaye