×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Scrollspy (Advanced)


It is used to update the links automatically in the navigation list based on the scroll position. Means in a navigation bar we can update the links in which our hidden content or image can be there. Here the data-spy="scroll" is use to add scroll on the webpage. And than we have to target our navbar with the scrollable area so this we can do by adding data-target=".navbar" also we have to take care about scrollable elements must match to the ID which is inside the navbar list .
Let’s understand this by the following program:-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>

</ul>

</nav>

<div id="section1" class="container-fluid bg-success"
style="padding-top:70px;padding-bottom:70px">

<h1>Section 1</h1>

<p>Hey this is section 1</p>

</div>

<div id="section2" class="container-fluid bg-warning"
style="padding-top:70px;padding-bottom:70px">

<h1>Section 2</h1>

<p>Hey this is section 2</p>

</div>

<div id="section3" class="container-fluid bg-secondary"
style="padding-top:70px;padding-bottom:70px">

<h1>Section 3</h1>

<p>Hey this is section 3</p>

</div>

</body>

</html>

Output of this Program


Section 1

Hey this is section 1

Section 2

Hey this is section 2

Section 3

Hey this is section 3


So here we get our scrollpy , where you can see as soon as you click on clicking.








Bootstrap 5 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute