VTEX Developer Portal

VTEX Sticky Layout

All ContributorsAll Contributors

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:

{
  "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"]
  }
}

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.

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Updated about a year ago


VTEX Sticky Layout


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.