×

Html & Html5

Introduction to Html

Component of Html

HTML Advance

HTML Advance

Html Form

Html5 basics

Html5 Grid

Html5 Graphics

Html5 Media

Html5 APIs

it training classes Logo

The World's best Software Development Study Portal

Bootstrap4

Introduction to Bootstrap4

Component of Bootstrap


Advance Grid

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