lhamadopagode / sticky-layout

Component that makes its children have sticky behaviour.

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.

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

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 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:

{
  "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 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.

{
  "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": ["vtex.menu@2.x:menu#websites"]
  },
  "sticky-layout#main-menu": {
    "children": ["vtex.menu@2.x:menu#category-menu"]
  }
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

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