<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<style>
#demoScrollspy {
position: relative;
}
</style>
</head>
<body>
<h1 class="m-4
text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Scrollspy getOrCreateInstance() Method
</h4>
<div>
<nav id="demoNavbar"
class="navbar
navbar-light
bg-light
px-3 m-4">
<a class="navbar-brand"
href="#">
Navbar
</a>
<ul class="nav">
<li class="nav-item">
<a class="nav-link"
href="#scrollspyHeading1">
DS
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#scrollspyHeading2">
Algorithms
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#scrollspyHeading3">
C++
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#scrollspyHeading4">
BootStrap 5
</a>
</li>
</ul>
</nav>
<div id="demoScrollspy"
class="container"
data-bs-spy="scroll"
data-bs-target="#demoNavbar"
data-bs-offset="0"
class="scrollspy-example"
tabindex="0">
<h4 id="scrollspyHeading1">
Data Structures
</h4>
<p>
A data structure is a group of data
elements that provides the easiest
way to store and perform different
actions on the data of the computer.
A data structure is a particular way
of organizing data in a computer so
that it can be used effectively.
The idea is to reduce the space and
time complexities of different tasks.
The choice of a good data structure
makes it possible to perform a variety
of critical operations effectively.
An efficient data structure also uses
minimum memory space and execution
time to process the structure.
</p>
<h4 id="scrollspyHeading2">
Algorithms
</h4>
<p>
The word Algorithm means ” A set of
finite rules or instructions to be followed
in calculations or other problem-solving
operations” Or ” A procedure for solving
a mathematical problem in a finite number
of steps that frequently involves recursive
operations”.It can be understood by taking
the example of cooking a new recipe.
To cook a new recipe, one reads the
instructions and steps and executes them one
by one, in the given sequence. The result
thus obtained is the new dish is cooked
perfectly. Every time you use your
phone, computer, laptop, or calculator
you are using Algorithms.
</p>
<h4 id="scrollspyHeading3">
C++
</h4>
<p>
C++ is a general-purpose programming language and
is widely used nowadays for competitive
programming. It has imperative, object-oriented
and generic programming features. C++ runs on
lots of platforms like Windows, Linux, Unix,
Mac etc.C++ is a general-purpose programming
language that was developed as an enhancement
of the C language to include object-oriented
paradigm. It is an imperative and a
compiled language.C++ is a middle-level language
rendering it the advantage of programming low-level
(drivers, kernels) and even higher-level applications
(games, GUI, desktop apps etc.). The basic syntax and
code structure of both C and C++ are the same.
</p>
<h4 id="scrollspyHeading4">
BootStrap 5
</h4>
<p>
Bootstrap is a free and open-source collection
of CSS and JavaScript/jQuery code used for
creating dynamic websites layout and web
applications. Bootstrap is one of the most
popular front-end frameworks which has really
a nice set of predefined CSS codes. Bootstrap
uses different types of classes to make
responsive websites. Bootstrap 5 was
officially released on 16 June 2020
after several months of redefining its
features.Bootstrap is a framework that is
suitable for mobile-friendly web development.
It means the code and the template available
on bootstrap are applicable to various
screen sizes. It is responsive for every screen size.
</p>
</div>
<div class="container text-center">
<button type="button"
class="btn btn-success btn-lg m-4"
id="demoBtn">
Get Or Create Scrollspy Instance
</button>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var btn =
document.getElementById("demoBtn");
var element =
document.getElementById("demoScrollspy");
btn.addEventListener("click", function () {
var scrollspyInstance =
bootstrap.ScrollSpy.getOrCreateInstance(element);
console.log(scrollspyInstance);
});
});
</script>
</body>
</html>