Documentation
Feedback
Guides

VTEX Sticky Layout

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.

Blocks

sticky-layout

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 nameTypeDescriptionDefault value
blockClassStringUnique class name to be appended to the container class""
positionPositionEnumIndicates where the component should stickN/A
verticalSpacingNumberIndicates the distance in pixels from the position chosen in the position prop0

PositionEnum options:

Enum nameEnum valueDescription
TOP'top'Component will stick to the top of screen
BOTTOM'bottom'Component will stick to the bottom of screen

CSS Handles:

Prop nameDescription
containerSticky layout container
wrapperWrapper element that takes up the space previously used by the stuck element to prevent the page from jumping
wrapper--stuckSticky layout wrapper when stuck to a position on the page

Example usage:


_26
{
_26
"store.product": {
_26
"children": [
_26
"flex-layout.row#product-breadcrumb",
_26
"flex-layout.row#product-main",
_26
"sticky-layout#buy-button"
_26
],
_26
"parent": {
_26
"challenge": "challenge.address"
_26
}
_26
},
_26
"sticky-layout#buy-button": {
_26
"props": {
_26
"position": "bottom"
_26
},
_26
"children": ["flex-layout.row#buy-button"]
_26
},
_26
"flex-layout.row#buy-button": {
_26
"props": {
_26
"marginTop": 4,
_26
"marginBottom": 7,
_26
"paddingBottom": 2
_26
},
_26
"children": ["buy-button"]
_26
}
_26
}

sticky-layout.stack-container

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 nameTypeDescriptionDefault value
positionPositionEnumIndicates where the component should stick. It overrides the position of its children sticky-layoutN/A

PositionEnum options:

Enum nameEnum valueDescription
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.


_34
{
_34
"header": {
_34
"blocks": ["header-layout.desktop"]
_34
},
_34
"header.full": {
_34
"blocks": ["header-layout.desktop"]
_34
},
_34
"header-layout.desktop": {
_34
// define a stack-container
_34
"children": ["sticky-layout.stack-container#header"]
_34
},
_34
"sticky-layout.stack-container#header": {
_34
"props": {
_34
"position": "top"
_34
},
_34
"children": [
_34
"sticky-layout#links-menu",
_34
// this notification.bar is not sticky, it will be scrolled away
_34
"notification.bar#home",
_34
"sticky-layout#main-menu"
_34
]
_34
},
_34
"notification.bar#home": {
_34
"props": {
_34
"content": "SELECTED ITEMS ON SALE! CHECK IT OUT!"
_34
}
_34
},
_34
"sticky-layout#links-menu": {
_34
"children": ["vtex.menu@2.x:menu#websites"]
_34
},
_34
"sticky-layout#main-menu": {
_34
"children": ["vtex.menu@2.x:menu#category-menu"]
_34
}
_34
}

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page