Scrollspy
Si toos ah u cusboonaysii Bootstrap navigation ama tax qaybaha kooxda ee ku salaysan booska rogid si aad u muujiso xidhiidhka hadda firfircoon ee muuqaalka.
Sida ay u shaqeyso
Scrollspy waxa ay leedahay shuruudo dhawr ah si uu si sax ah ugu shaqeeyo:
- Waa in lagu isticmaalo qaybta Bootstrap nav ama kooxda liiska .
- Scrollspy waxay u baahan tahay
position: relative;
walxaha aad basaasayso, badanaaba<body>
. - Barroosinnada (
<a>
) ayaa loo baahan yahay oo waa inay farta ku fiiqaan shay taas lehid
.
Marka si guul leh loo fuliyo, nav-gaaga ama kooxdaada liiska ayaa u cusboonaysiin doona si waafaqsan, iyaga oo ka wareejinaya .active
fasalka hal shay una guuri doona kan xiga iyadoo lagu saleynayo yoolalka la xiriira.
Weelasha la duubi karo iyo gelitaanka kiiboodhka
Haddii aad samaynayso weel la duubi karo (oo aan ahayn kan <body>
), hubi inaad haysato height
set oo overflow-y: scroll;
aad ku shubto- oo ay la socoto a tabindex="0"
si loo hubiyo gelitaanka kiiboodhka.
Tusaale ahaan navbar
U rog aagga navbar ka hooseeya oo daawo isbeddelka fasalka firfircoon. Waxyaabaha hoos u dhaca ayaa sidoo kale la iftiimin doonaa.
Ciwaanka ugu horeeya
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Ciwaanka labaad
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Ciwaanka saddexaad
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Ciwaanka afraad
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Ciwaanka shanaad
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
<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>
Tusaale leh nav buul leh
Scrollspy sidoo kale waxay la shaqeysaa buulka .nav
s. Haddii buul ku .nav
yaal .active
, waalidkeed sidoo kale waxay ahaan doonaan .active
. U rog aagga ku xiga navbar oo daawo isbeddelka fasalka firfircoon.
Shayga 1
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 1-1
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 1-2
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 2
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 3
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 3-1
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 3-2
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
<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>
Tusaale kooxda liiska
Scrollspy sidoo kale waxay la shaqeysaa .list-group
s. U rog aagga ku xiga kooxda liiska oo daawo isbeddelka fasalka firfircoon.
Shayga 1
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 2
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 3
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
Shayga 4
Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, isku xirka hagidda ku habboon waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.
<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>
Isticmaalka
Iyada oo loo marayo sifooyinka xogta
Si aad si fudud ugu darto habdhaqanka scrollspy to your topbar navigation, data-bs-spy="scroll"
ku dar walxaha aad rabto in aad basaasto (inta badan tani waxay noqonaysaa <body>
). Ka dib ku dar data-bs-target
sifada aqoonsiga ama fasalka xubinta waalidka ee qayb kasta oo Bootstrap .nav
ah.
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>
Iyadoo loo marayo JavaScript
Ka dib markaad ku position: relative;
darto CSS-gaaga, wac qoraalka qoraalka JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Bartilmaameedyada aqoonsiga ee la xallin karo ayaa loo baahan yahay
Xidhiidhiyayaasha Navbar waa inay lahaadaan bartilmaameedyada id la xallin karo. Tusaale ahaan, <a href="#home">home</a>
waa inuu u dhigmaa wax ku jira DOM sida <div id="home"></div>
.
Qodobbada bartilmaameedka ah ee aan muuqan waa la iska indhatiray
Walxaha bartilmaameedka ah ee aan muuqan waa la iska indhatiray oo alaabtooda u dhigma weligood lama iftiimin doono.
Hababka
dib u cusboonaysii
Markaad isticmaalayso scrollspy iyadoo lala kaashanayo ku darista ama ka saarida walxaha DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusboonaysiinta sida:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
tuurid
Wuxuu baabi'iyaa rog-rogadka curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)
heliTusaale
Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha scrollspy ee la xidhiidha curiyaha DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
HelOrCreateInstance
Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha duubista ee la xidhiidha walxaha DOM, ama abuurto mid cusub haddii aan la bilaabin
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Ikhtiyaarada
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-
, sida ku jira data-bs-offset=""
.
Magaca | Nooca | Asal ahaan | Sharaxaada |
---|---|---|---|
offset |
tirada | 10 |
Pixels in laga bilaabo xagga sare marka la xisaabinayo booska rogid. |
method |
xadhig | auto |
Hesho qaybta qaybta la basaasay uu ku auto jiro offset waxay isticmaali doontaa Element.getBoundingClientRect() habka si aad u hesho isku-dubbaridka. position waxay isticmaali doontaa guryaha HTMLElement.offsetTop iyo HTMLElement.offsetLeft guryaha si ay u helaan isku-dubaridka. |
target |
xadhig | shayga jQuery | Qaybta DOM | Wuxuu qeexayaa curiyaha lagu dabaqi karo Scrollpy plugin. |
Dhacdooyinka
Nooca dhacdada | Sharaxaada |
---|---|
activate.bs.scrollspy |
Dhacdadani waxay dab ku shid cunsuga duuduubka mar kasta oo shay cusub uu hawl galo duubista. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})