Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Layout Apps
VTEX Sticky Layout
Official extension
Version: 0.3.4
Latest version: 0.3.4

{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}

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
}

See also
VTEX App Store
VTEX IO Apps