VTEX Sticky Layout

This component is used to make its children have sticky behaviour.

For now, it supports only one postion, with value "BOTTOM".

Passing the prop "position": "bottom" in your blocks.json, makes its children stick to the bottom of its view, while it should be hidden and once it reaches the position it should be, it stops and stays there.

You can understand more by reading this example: https://www.w3schools.com/howto/howto_css_sticky_element.asp

Layout API

This props should be edited at your theme's blocks.json

Prop nameTypeDescriptionDefault value
blockClassStringUnique class name to be appended to block container class""
positionPositionEnumIndicates where the component should stickN/A

PositionEnum description: | Enum name | Enum value | Description | | --------- | ---- | ----------- | | BOTTOM | 'bottom' | Component will stick to the bottom of screen |

Example usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "sticky-layout#buy-button"
    ],
    "parent": {
      "challenge": "challenge.address"
    }
  },
  "sticky-layout#buy-button": {
    "props": {
      "position": "bottom"
    },
    "children": ["flex-layout.row#buy-button"]
  },
  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7,
      "paddingBottom": 2
    },
    "children": ["buy-button"]
  },