Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #50 | Scrollspy Tutorial. Earlier I have shared the Bootstrap 5 Tutorial In Hindi #49 | Carousel Tutorial. and now it’s time to Bootstrap 5 Scrollspy Tutorial.
In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is below Hope it will help you all thank you for visiting.
In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Scrollspy Tutorial. Here You can learn what is a bootstrap framework, what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!
Scrollspy
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
How it works
Scrollspy has a few requirements to function properly:
- It must be used on a Bootstrap nav component or list group.
- Scrollspy requires
position: relative;on the element you’re spying on, usually the<body>. - Anchors (
<a>) are required and must point to an element with thatid.
When successfully implemented, your nav or list group will update accordingly, moving the .active class from one item to the next based on their associated targets.
Scrollable containers and keyboard access
If you’re making a scrollable container (other than the <body>), be sure to have a height set and overflow-y: scroll; applied to it—alongside a tabindex="0" to ensure keyboard access.
Example in navbar
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
Example with nested nav
Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be .active. Scroll the area next to the navbar and watch the active class change.
Example with list-group
Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.
Via data attributes
To easily add scrollspy behavior to your topbar navigation, add data-bs-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-bs-target attribute with the ID or class of the parent element of any Bootstrap .nav component.