Fixed Layout

Provides a fixed position container whose classes change by scrolling the page.

On scroll, the container will change its classes to reflect the current scroll direction, and if has past a given threshold.

Can be use to create fixed headers, microheaders, footers, popups, etc.

capture

Configuration

fixed-layout props

Prop name	Type	Description	Default value
threshold	number	When page is scrolled past this number a class is added on node.	300

Usage

{
  "fixed-layout#header-mobile": {
    "props": {
      "blockClass": ["header", "header--mobile"]
    },
    "children": ["container#differentials", "container#main-header-mobile"]
  }
}