Scrollspy
Përditësoni automatikisht navigimin e Bootstrap ose listoni përbërësit 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:
- Duhet të përdoret në një komponent navigues ose grup liste të Bootstrap .
- Scrollspy kërkon
position: relative;
elementin që po spiunoni, zakonisht<body>
. - Ankorat (
<a>
) janë të nevojshme dhe duhet të tregojnë një element me atëid
.
Kur zbatohet me sukses, grupi juaj navigues ose i listës do të përditësohet në përputhje me rrethanat, duke e zhvendosur .active
klasën nga një artikull në tjetrin bazuar në objektivat e tyre të lidhur.
Kontejnerët e lëvizshëm dhe aksesi në tastierë
Nëse jeni duke bërë një kontejner të lëvizshëm (përveç <body>
), sigurohuni që të keni një height
grup dhe overflow-y: scroll;
të aplikoni në të — krahas një tabindex="0"
për të siguruar akses në tastierë.
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.
Titulli i parë
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Kreu i dytë
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Kreu i tretë
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Kreu i katërt
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Kreu i pestë
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
<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>
Shembull me navin e mbivendosur
Scrollspy gjithashtu punon me .nav
s 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
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 1-1
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 1-2
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 2
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 3
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 3-1
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 3-2
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
<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>
Shembull me listë-grup
Scrollspy gjithashtu punon me .list-group
s. Lëvizni zonën pranë grupit të listës dhe shikoni ndryshimin e klasës aktive.
Pika 1
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 2
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 3
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
Pika 4
Kjo është një përmbajtje mbajtëse vendesh për faqen scrollspy. Vini re se ndërsa lëvizni poshtë faqes, theksohet lidhja e duhur e navigimit. Përsëritet gjatë gjithë shembullit të komponentit. Ne vazhdojmë të shtojmë disa kopje të tjera shembullore këtu për të theksuar lëvizjen dhe theksimin.
<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>
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-bs-spy="scroll"
te elementi që dëshironi të spiunoni (më së shpeshti kjo do të ishte <body>
). Më pas shtoni data-bs-target
atributin me ID-në ose klasën e elementit prind të çdo .nav
komponenti 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>
Përmes JavaScript
Pasi të shtoni position: relative;
në CSS tuaj, telefononi scrollspy përmes JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Kërkohen objektiva ID të zgjidhshme
Lidhjet e shiritit të navigimit duhet të kenë objektiva id të zgjidhshme. Për shembull, një <a href="#home">home</a>
duhet të korrespondojë me diçka në DOM si <div id="home"></div>
.
Elementët e synuar jo të dukshëm janë injoruar
Elementet e synuar që nuk janë të dukshëm do të shpërfillen dhe artikujt e tyre përkatës të navigimit nuk do të theksohen kurrë.
Metodat
freskoj
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:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
disponoj
Shkatërron rrotullimin e një elementi. (Heq të dhënat e ruajtura në elementin DOM)
getInstance
Metoda statike e cila ju lejon të merrni shembullin scrollspy të lidhur me një element DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Metoda statike e cila ju lejon të merrni shembullin scrollspy të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
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-bs-
, si në data-bs-offset=""
.
Emri | Lloji | E paracaktuar | Përshkrim |
---|---|---|---|
offset |
numri | 10 |
Piksele për t'u zhvendosur nga lart kur llogaritni pozicionin e rrotullës. |
method |
varg | auto |
Gjen se në cilin seksion ndodhet elementi i spiunuar. auto do të zgjedhë metodën më të mirë për të marrë koordinatat e lëvizjes. offset do të përdorë Element.getBoundingClientRect() metodën për të marrë koordinatat e lëvizjes. position do të përdorë veçoritë HTMLElement.offsetTop dhe HTMLElement.offsetLeft për të marrë koordinatat e lëvizjes. |
target |
varg | Objekti jQuery | Elementi DOM | Përcakton elementin për të aplikuar shtesën Scrollspy. |
Ngjarjet
Lloji i ngjarjes | Përshkrim |
---|---|
activate.bs.scrollspy |
Kjo ngjarje ndizet në elementin e lëvizjes sa herë që një artikull i ri aktivizohet nga scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})