Bootstrap5 Scrollspy Methods are used to control the Scrollspy element with the help of Javascript and perform operations like disposing of, getting or creating the Scrollspy instance, refreshing the element, etc along with finding out useful data about the widget within Javascript.
Bootstrap 5 Scrollspy getInstance() Method
- getInstance(): The Scrollspy instance linked to a DOM element may be obtained using this static function.
Syntax:
bootstrap.Scrollspy.getInstance(scrollspy-element)
Example 1: The code demonstrates how to implement the usage of the getInstance() Method using JavaScript on a Scrollspy with a navbar:
<!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 Via data attributes
</ 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 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 demoScrollspy = bootstrap.ScrollSpy.getInstance(element);
console.log(demoScrollspy);
});
});
</ script >
</ body >
</ html >
|
Output:
Example 2: The code demonstrates how to implement the usage of the getInstance() Method using JavaScript on a Scrollspy in a Nested Side Navbar:
<!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 Via data attributes
</ h4 >
< div >
< nav class="navbar navbar-light
bg-light px-3 m-4"
id = "demoNavbar" >
< a class = "nav-link active" href = "#dataStructs" >
Data Structures
</ a >
< a class = "nav-link" href = "#algo" >
Algorithms
</ a >
< nav class = "navbar" id = "demoNavbar" >
< div class = "dropdown" >
< button class="btn btn-primary
dropdown-toggle
ms-4 my-1"
type = "button" id = "dropdownMenuButton1" data-bs-toggle = "dropdown" aria-expanded = "false" href = "#other" >
Other Navbar
</ button >
< ul class = "dropdown-menu bg-dark" aria-labelledby = "dropdownMenuButton1" >
< nav class="navbar navbar-expand-sm
navbar-dark bg-dark"
id = "demoNavbar" >
< a class = "nav-link ms-3 my-1" href = "#bootstrap" >
Bootstrap
</ a >
< a class = "nav-link ms-3 my-1" href = "#cpp" >
C++
</ a >
</ nav >
</ ul >
</ div >
</ nav >
</ nav >
< div id = "demoScrollspy" class = "container" data-bs-spy = "scroll" data-bs-target = "#demoNavbar" data-bs-offset = "0" class = "scrollspy-example" tabindex = "0" >
< div class = "" >
< div id = "dataStructs" >
< h2 >Data Structures</ h2 >
< 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.
</ p >
</ div >
< div id = "algo" >
< h2 >Algorithms</ h2 >
< 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”..</ p >
</ div >
< div id = "other" >
< h1 >Others</ h1 >
</ div >
< div id = "bootstrap" >
< h2 >Bootstrap</ h2 >
< p >
Bootstrap is a free and open-source
collection of CSS and JavaScript/jQuery code
used for creating dynamic websites layout and
web applications. </ p >
</ div >
< div id = "cpp" >
< h2 >C++</ h2 >
< 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. </ p >
</ div >
</ div >
</ div >
< div class = "container text-center" >
< button type = "button" class = "btn btn-success btn-lg m-4" id = "demoBtn" >
Get 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 demoScrollspy = bootstrap.ScrollSpy.getInstance(element);
console.log(demoScrollspy);
});
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/scrollspy/#getinstance