×

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 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body data-spy="scroll" data-target=".navbar" data-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 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute