Sticky

The "sticky" block container adheres to the top edge of the screen. The element behaves normally until scrolling positions it below the top edge of the screen. In a situation where a regular container would be even partially hidden behind the top edge of the screen, the sticky element "detaches" from its position on the page and is positioned at the top edge of the screen.

Properties

style

Changes the appearance, positioning, and geometry of the block.

• width, maxWidth, minWidth
  Width of the block. More details.

• height, maxHeight, minHeight
  Height of the block. More details.

• padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft
  Internal padding of the container. More details.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  External margins of the block. More details.

• border
  Sets borders for the block on all four sides: thickness, style, and color. More details.

• borderTop, borderRight, borderBottom, borderLeft
  Sets individual borders for each side of the block: thickness and color. More details.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Rounding the corners of the borders. More details.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Thickness of the borders. More details.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Color of the borders. More details.

• backgroundColor
  Background color of the block. More details.

• backgroundGradient
  Background gradient of the block. More details.

• opacity
  Opacity of the entire block along with its content. More details.

• elevation
  Shadow height. More details.

• shadowColor
  Color of the block's shadow. More details.

• flexDirection
  Defines the main axis of the container (the direction of blocks within the container). More details.

• flexBasis
  Initial size of the block along the main axis of the container. More details.

• justifyContent
  Alignment and distribution of space along the main axis of the container. More details.

• alignItems
  Alignment across the main axis of the container. More details.

• alignContent
  Distribution of space across the main axis of the container. More details.

• alignSelf
  Alignment of a specific block across the main axis of the container. More details.

• flexWrap
  Wrapping blocks onto a new line along the main axis of the container. More details.

Examples