Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Sticky container

A block becoming sticky when you scroll at a certain point of the page.

last modified: 05/04/2022 10:15:10

Default sticky container

To obtain a sticky container, create an element and add data-sticky-container attribute with an id that you will put in the element where you want the container becoming sticky. You also need data-sticky-container-breakpoint attribute that you will fill with the breakpoint needed to launch the script.

Information

The sticky container needs a <div class="rs-me2"></div> element to avoid the container from being stuck to the edge of the screen.

Example of sticky container

Sticky container with a different offset

If you need a specific offset, instead of <div class="rs-me2"></div> use data-sticky-container-offset attribute with the offset in px you need. The html solution is strongly recommended for performance.

Example of sticky container with different offset

JavaScript

How to trigger the js

Each time you add Sticky element to the page, you have to use this JS function: inception.stickyContainer(ELS);

ELS refers to all sticky elements, for exemple document.querySelectorAll('[data-sticky-container]') .