<!DOCTYPE html>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset = utf-8"
/>
<
title
> jQuery Multiscroll Plugin</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"jquery.multiscroll.css"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"examples.css"
/>
<
script
src
=
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.easings.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.multiscroll.js"
>
</
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
$('#containerDivID').multiscroll({
sectionsColor: ['#008000', '#32CD32', '#90EE90'],
anchors: ['php', 'mysql', 'jquery'],
menu: '#menu',
css3: true,
navigation: true,
navigationTooltips: ['php', 'mysql', 'jquery'],
easing: 'easeOutBack',
paddingTop: '100px',
paddingBottom: '100px'
});
});
</
script
>
<
style
>
#headerDivID,
#footerDivID {
position: fixed;
width: 100%;
height: 50px;
display: block;
text-align: center;
background: #808080;
z-index: 5;
color: #e9e9e9;
padding: 20px 0 0 0;
}
#headerDivID {
top: 0px;
}
#footerDivID {
bottom: 0px;
}
#menu {
position: fixed;
height: 50px;
z-index: 50;
width: 100%;
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
margin: 10px;
color: #0000;
background-color: #808080;
background: rgba(255, 255, 255, 0.5);
-webkit-border-radius: 12px;
}
#menu li a {
text-decoration: none;
color: #000;
}
#menu li.active {
background-color: #696969;
background: rgba(255, 255, 255, 1.5);
color: #0000;
}
#menu li:hover {
background: rgba(255, 255, 255, 0.5);
}
#menu li.active a {
color: #0000;
}
#menu li.active a:hover {
color: #0000;
}
#menu li a,
#menu li.active a {
padding: 10px 15px;
display: block;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"headerDivID"
>GeeksforGeeks</
div
>
<
div
id
=
"footerDivID"
>footer@GeeksforGeeks</
div
>
<
ul
id
=
"menu"
>
<
li
data-menuanchor
=
"first"
><
a
href
=
"#php"
>
<
b
>PHP slide</
b
></
a
></
li
>
<
li
data-menuanchor
=
"second"
><
a
href
=
"#mysql"
>
<
b
>MySQL slide</
b
></
a
></
li
>
<
li
data-menuanchor
=
"third"
><
a
href
=
"#jquery"
>
<
b
>jQuery slide</
b
></
a
></
li
>
</
ul
>
<
div
id
=
"containerDivID"
>
<
div
class
=
"ms-left"
>
<
div
class
=
"ms-section"
id
=
"phpleftId"
>
<
h1
>Left1 </
h1
>
</
div
>
<
div
class
=
"ms-section"
id
=
"mysqlleftId"
>
<
h1
> Left2 </
h1
>
</
div
>
<
div
class
=
"ms-section"
id
=
"jqueryleftId"
>
<
h1
> Left3 </
h1
>
</
div
>
</
div
>
<
div
class
=
"ms-right"
>
<
div
class
=
"ms-section"
id
=
"phprightId"
>
<
h1
>Right1 </
h1
>
</
div
>
<
div
class
=
"ms-section"
id
=
"mysqlrightId"
>
<
h1
>MySQL Right2 </
h1
>
</
div
>
<
div
class
=
"ms-section"
id
=
"jqueryrightId"
>
<
h1
>jQuery Right3</
h1
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>