The Sticky Layout app provides layout structures to help building elements that should be fixed relative to the viewport in certain contexts.

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

You can understand more by reading about in the MDN position documentation.

• sticky-layout
• sticky-layout.stack-container

The sticky-layout block is responsible for making its children stick to a certain position on the page when exiting the viewport while scrolling.

Props:

Prop name	Type	Description	Default value
blockClass	String	Unique class name to be appended to the container class	""
position	PositionEnum	Indicates where the component should stick	N/A
verticalSpacing	Number	Indicates the distance in pixels from the position chosen in the position prop	0

PositionEnum options:

Enum name	Enum value	Description
TOP	'top'	Component will stick to the top of screen
BOTTOM	'bottom'	Component will stick to the bottom of screen

CSS Handles:

Prop name	Description
container	Sticky layout container
wrapper	Wrapper element that takes up the space previously used by the stuck element to prevent the page from jumping
wrapper--stuck	Sticky layout wrapper when stuck to a position on the page

Example usage:

The sticky-layout.stack-container block can be used to orchestrate multiple sticky-layouts to have a stack behavior instead of one being on top of the other.

Props:

Prop name	Type	Description	Default value
position	PositionEnum	Indicates where the component should stick. It overrides the position of its children sticky-layout	N/A

PositionEnum options:

Enum name	Enum value	Description
TOP	'top'	Component will stick to the top of screen
BOTTOM	'bottom'	Component will stick to the bottom of screen

Example usage:

Imagine three blocks: the first and the last being a sticky-layout and the second being any other block. A gap between both sticky-layouts will appear the moment the user starts scrolling the page. By defining those blocks inside a sticky-layout.stack-container, the second sticky-layout block will stick to the first sticky-layout instead of respecting the aformetioned gap or being one on top of the other.