<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bootstrap offset property</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
body {
position: relative;
}
#section1 {
padding-top: 50px;
height: 600px;
background-color: #32CD32;
}
#section2 {
padding-top: 50px;
height: 600px;
background-color: #FFFF00;
}
#section3 {
padding-top: 50px;
height: 600px;
background-color: #00FF00;
}
#section4 {
padding-top: 50px;
height: 600px;
background-color: #FF0000;
}
</
style
>
</
head
>
<
body
>
<
nav
class="navbar navbar-dark bg-success
navbar-fixed-top">
<
div
class
=
"container-fluid"
>
<
div
class
=
"navbar-header"
>
<
button
type
=
"button"
class
=
"navbar-toggle"
data-toggle
=
"collapse"
data-target
=
"#myNavbar"
>
<
span
class
=
"icon-bar"
></
span
>
<
span
class
=
"icon-bar"
></
span
>
<
span
class
=
"icon-bar"
></
span
>
</
button
>
<
a
class
=
"navbar-brand"
href
=
"#"
>
GeeksforGeeks
</
a
>
</
div
>
<
div
>
<
div
class
=
"collapse navbar-collapse"
id
=
"myNavbar"
>
<
ul
class
=
"nav navbar-nav"
>
<
li
><
a
href
=
"#section1"
>Section 1</
a
></
li
>
<
li
><
a
href
=
"#section2"
>Section 2</
a
></
li
>
<
li
><
a
href
=
"#section3"
>Section 3</
a
></
li
>
<
li
><
a
href
=
"#section4"
>Section 4</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
nav
>
<
div
id
=
"section1"
class
=
"container-fluid"
>
<
h1
>Section 1</
h1
>
<
hr
>
<
p
>
GeeksforGeeks is a computer science
portal. It was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
GeeksforGeeks is a computer science
portal. It was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</
p
>
</
div
>
<
div
id
=
"section2"
class
=
"container-fluid"
>
<
h1
>Section 2</
h1
>
<
hr
>
<
p
>
GeeksforGeeks is a computer science
portal. It was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
GeeksforGeeks is a computer science
portal. It was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</
p
>
</
div
>
<
div
id
=
"section3"
class
=
"container-fluid"
>
<
h1
>Section 3</
h1
>
<
hr
>
<
p
>
GeeksforGeeks is a computer science
portal. It was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
GeeksforGeeks is a computer science
portal. It was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</
p
>
</
div
>
<
div
id
=
"section4"
class
=
"container-fluid"
>
<
h1
>Section 4</
h1
>
<
hr
>
<
p
>
GeeksforGeeks is a computer science
portal. It was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
GeeksforGeeks is a computer science
portal. It was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</
p
>
</
div
>
<
script
>
$(document).ready(function () {
$('body').scrollspy({
target: ".navbar", offset: 50
});
});
</
script
>
</
body
>
</
html
>