Foundation CSS Off-canvas Sticky
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.
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.