<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"
/>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
style
=
"margin: 1rem 5rem;"
>
<
div
class
=
"off-canvas-wrapper"
>
<
div
class
=
"off-canvas-wrapper-inner"
data-off-canvas-wrapper>
<
div
class
=
"off-canvas position-left"
id
=
"off_canvas_left"
data-off-canvas>
<
ul
style
=
"margin: 2rem;"
>
<
li
><
a
>DSA</
a
></
li
>
<
li
><
a
>Algorithms</
a
></
li
>
<
li
><
a
>Competitive Programming</
a
></
li
>
<
li
><
a
>Java</
a
></
li
>
<
li
><
a
>C++</
a
></
li
>
<
li
><
a
>Python</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"top-bar sticky"
data-sticky data-off-canvas-sticky>
<
div
class
=
"top-bar-left"
>
<
ul
class
=
"dropdown menu"
data-dropdown-menu>
<
li
class
=
"menu-text"
style
=
"color: green;"
>
GeeksforGeeks
</
li
>
</
ul
>
</
div
>
<
div
class
=
"top-bar-right"
>
<
ul
class
=
"menu"
>
<
li
><
input
type
=
"search"
placeholder
=
"Search"
></
li
>
<
li
>
<
button
type
=
"button"
class
=
"button"
>
Search
</
button
>
</
li
>
</
ul
>
</
div
>
</
div
>
<
div
class
=
"off-canvas-content"
data-off-canvas-content>
<
div
style
=
"margin: 1rem;"
>
<
h3
>Foundation CSS Kitchen Sink Off-canvas</
h3
>
</
div
>
<
button
type
=
"button"
class
=
"button"
data-toggle
=
"off_canvas_left"
style
=
"margin: 1rem"
>
Click Here to open Off-Canvas
</
button
>
<
p
style
=
"margin: 1rem;"
>
In this example we can see the off-canvas
opening doesn't effect the position of
the sticky element.
</
p
>
<
p
style
=
"margin: 1rem;"
>
Also we can always use all the sticky classes
and attributes.
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
$(document).ready(function () {
$(document).foundation();
})
</
script
>
</
body
>
</
html
>