Skip to content
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
Cannot retrieve contributors at this time

feature: position:sticky status: caution tags: prefixes polyfill kind: css polyfillurls: Stickyfill

position: sticky combines aspects of relative and fixed positioning. Elements to which it is applied initially act as though they are position: relative, but switch to acting like position: fixed when they reach a specified position relative to the viewport. This behavior is often useful for section headings or navigational sidebars. This Mozilla presentation video shows how position: sticky behaves in common use-cases.

Supported unprefixed in Firefox 30.0+. Supported with a prefix (as -webkit-sticky) in OS X Safari 7.0+ and iOS Safari 6.0+. Currently part of the CSS Positioned Layout Module Level 3 W3C Working Draft.

Caution is advised since the spec is currently only at the Working Draft stage and thus can be subject to change. The usage of a polyfill is strongly recommended due to the current level of browser support. Signs currently seem positive for browser support increasing in the future.

Use Stickyfill for a wide range of use cases with top aligned sticky positioned blocks and table cells.