<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
,
shrink-to-fit
=
no
">
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin
=
"anonymous"
>
integrity
=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin
=
"anonymous"
>
</
script
>
<
style
>
html {
/*For smooth scrolling behavior*/
scroll-behavior: smooth;
}
#home,
#section1,
#section2,
#section3,
#section4 {
height: 70vh;
text-align: center;
font-size: 20px;
padding-top: 50px;
}
#home {
background-color: lightgreen;
}
#section1 {
background-color: lightcoral;
}
#section2 {
background-color: cyan;
}
#section3 {
background-color: lightsalmon;
}
#section4 {
background-color: lightseagreen;
}
</
style
>
</
head
>
<
body
>
<
section
id
=
"navigation"
>
<
nav
class="navbar navbar-expand-sm
navbar-dark bg-dark fixed-top">
<
div
class
=
"container"
>
<
a
class
=
"navbar-brand"
href
=
"#"
style
=
"color:greenyellow;"
>
Geeks for Geeks
</
a
>
<
div
class
=
" navbar-default"
>
<
ul
class
=
"navbar-nav ml-auto"
>
<
li
class
=
"nav-item "
>
<
a
class
=
"nav-link active"
href
=
"#"
>
Home
</
a
>
</
li
>
<
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
>
<
li
class
=
"nav-item"
>
<
a
class
=
"nav-link"
href
=
"#section4"
>
Section 4
</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
nav
>
<
br
><
br
>
<
section
id
=
"home"
class
=
"page-section"
>
Home </
section
>
<
section
id
=
"section1"
class
=
"page-section"
>
Section-1 </
section
>
<
section
id
=
"section2"
class
=
"page-section"
>
Section-2 </
section
>
<
section
id
=
"section3"
class
=
"page-section"
>
Section-3 </
section
>
<
section
id
=
"section4"
class
=
"page-section"
>
Section-4 </
section
>
<
script
>
/* Code for changing active
link on clicking */
var btns =
$("#navigation .navbar-nav .nav-link");
for (var i = 0; i <
btns.length
; i++) {
btns[i].addEventListener("click",
function () {
var
current
=
document
.getElementsByClassName("active");
current[0]
.className
=
current
[0]
.className.replace(" active", "");
this.className += " active";
});
}
/* Code for changing active
link on Scrolling */
$(window).scroll(function () {
var distance = $(window).scrollTop();
$('.page-section').each(function (i) {
if ($(this).position().top
<= distance + 250) {
$('.navbar-nav a.active')
.removeClass('active');
$('.navbar-nav a').eq(i)
.addClass('active');
}
});
}).scroll();
</script>
</
section
>
</
body
>
</
html
>