Foundation CSS Off-canvas Sticky
Last Updated :
19 Apr, 2023
Foundation CSS is a free, open-source front-end framework for creating dynamic web designs. It includes a responsive grid, HTML and CSS UI components, templates, and more, making it one of the most comprehensive CSS frameworks. It also has a number of JavaScript Extension features that can be turned on or off. It also renders quickly on mobile devices thanks to the integration of the Fastclick.js utility.
Off-canvas panels are positioned outside of the viewport and slide when active. This off-canvas menu can be accessed from the screen’s left, right, top, or bottom, and it can overlap, push, and operate with sticky elements. These patterns were created with mobile devices in mind and are mobile-friendly. This can also be used as a sidebar on medium and desktop screens.
When we use an Off-canvas viewport, upon opening it the elements with position: fixed disappears when the off-canvas opens with a push transition. The reason for this is that the off-canvas content container’s transform property enables the fixed element to behave in a position: absolute manner.
Foundation CSS Off-canvas Sticky enables us to preserve that position: fixed property. We can add the Off-canvas Sticky attribute and make sure that the element stays fixed even after the off-canvas.
Foundation CSS Off-canvas Sticky Class:
- Sticky: This class is used to make an element sticky to a particular position.
Foundation CSS Off-canvas Sticky Attributes:
- data-off-canvas-sticky: This attribute is mainly responsible for preserving the fixed appearance of an element. When this attribute is added to an element it will ensure that the element won’t get hidden when the off-canvas is opened
We can use Foundation CSS Sticky classes and attributes simultaneously with this attribute. Although when we use the .data-sticky attribute the element is by default fixed with the scrolling and the opening of the off-canvas. But using the data-off-canvas-sticky attribute will on;y keep it fixed when the off-canvas is opened.
Example 1: The code below demonstrates how we can make a top bar stay in its position when the off-canvas is opened.
HTML
<!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 Off-canvas Sticky</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>
|
Output:
Look closely at the output gif you can see all the contents of the pages shifts when the off-canvas is opened but the top navbar is fixed.
Example 2: The below-given code demonstrates how the data-off-canvas-sticky and data-sticky attributes produce the same result with respect to being fixed during the off-canvas is opened.
HTML
<!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="off-canvas-content"
data-off-canvas-content>
<div style="margin: 1rem;">
<h1 style="color: green;">
Foundation CSS Off-canvas Sticky
</h1>
<h4>Foundation CSS Off-canvas Sticky</h4>
</div>
<button type="button" class="button"
data-toggle="off_canvas_left">
Click Here to open
Off-Canvas
</button>
</div>
<div class="" data-off-canvas-sticky data-margin-top="0">
<img class="thumbnail"
src=
</div>
<div class="sticky" data-sticky data-margin-top="0">
<img class="thumbnail"
src=
style="width: 15rem;">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/off-canvas.html#sticky
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...