<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
" />
<
title
>
Bootstrap 5 Scrollspy Methods
</
title
>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin
=
"anonymous"
/>
<
script
src
=
integrity
=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
h4
>
Bootstrap 5 Scrollspy Methods
</
h4
>
<
h5
class
=
"mt-5"
>
Top GFG Articles For You:
</
h5
>
<
div
class="row my-3 bg-dark
text-light p-3">
<
div
class
=
"col-2"
>
<
div
id
=
"my-nav"
class
=
"list-group"
>
<
a
class="list-group-item
list-group-item-action"
href
=
"#e1"
>
Article 1
</
a
>
<
a
class="list-group-item
list-group-item-action"
href
=
"#e2"
>
Article 2
</
a
>
<
a
class="list-group-item
list-group-item-action"
href
=
"#e3"
>
Article 3
</
a
>
<
a
class="list-group-item
list-group-item-action"
href
=
"#e4"
>
Article 4
</
a
>
</
div
>
</
div
>
<
div
class
=
"col-6"
>
<
div
style="height: 200px;
overflow-y: scroll;"
id
=
"scrollSpy"
data-bs-spy
=
"scroll"
data-bs-target
=
"my-nav"
data-bs-smooth-scroll
=
"true"
tabindex
=
"0"
>
<
h4
id
=
"e1"
>
How to Create a QR Code – 4 Ways to
Generate Dynamic QR Code For Free
</
h4
>
<
p
>
Ever since UPI payment was launched
in India, more than 50% of people
have relied on the QR Code payment
system.Well, this is one of the
examples of how people heavily depend
on QR codes to simplify their tasks.
Previously, QR codes weren’t popular
as mobile phones didn’t have the
feature that has native QR
scanning capabilities.
</
p
>
<
h4
id
=
"e2"
class
=
"mt-5"
>
7 Reasons to Update Your LinkedIn
Profile in 2023
</
h4
>
<
p
>
Updating your social media handles
regularly is a must to stay afloat
in the digital world. LinkedIn is one
such platform that is coming up with
various new features every now and then,
so it is apt to say that if you are
a LinkedIn user and want to leverage
the potential of this platform, then
you have to keep your profile updated.
</
p
>
<
h4
id
=
"e3"
class
=
"mt-5"
>
Puzzle | The Alien Extinction Riddle
</
h4
>
<
p
>
An alien visits Earth one day. Each
alien accomplishes one of the following
four actions every day, with equal
likelihood: Kill himself, Do nothing,
Divide into two aliens (while killing
itself), Divided tself into three aliens
(while killing itself). What is the
probability that the alien species
eventually die out entirely?
</
p
>
<
h4
id
=
"e4"
class
=
"mt-5"
>
Maximum triplets containing atleast
one x and one y
</
h4
>
<
p
>
Given counts of x, y, and z, the task is to
find the maximum number of triplets that
can be made from the count of x, y, and z
such that one triplet contains at least
one x and at least one y. It is not
necessary to use all x, y, and z.
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
const scrollSpyElement =
bootstrap.ScrollSpy.getOrCreateInstance(
document.querySelector("#scrollSpy"));
scrollSpyElement.dispose();
console.log(scrollSpyElement);
</
script
>
</
body
>
</
html
>