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">


<title> bootstrap 4 Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet"

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

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

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


<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 class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>

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



<div id="section1" class="container-fluid bg-success"

<h1>Section 1</h1>

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


<div id="section2" class="container-fluid bg-warning"

<h1>Section 2</h1>

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


<div id="section3" class="container-fluid bg-secondary"

<h1>Section 3</h1>

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




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