CSS position:sticky

Keeps elements positioned as "fixed" or "relative" depending on how it appears in the viewport. As a result the element is "stuck" when necessary while scrolling.

W3C Working Draft: https://w3c.github.io/csswg-drafts/css-position/#sticky-pos

Usage: 95.4% + 0.8% = 96.2%

Support summary

Notes

`sticks` to its nearest ancestor that has a `scrolling mechanism` (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor

  1. Can be enabled in Firefox by setting the about:config preference layout.css.sticky.enabled to true
  2. Enabled through the "experimental Web Platform features" flag
  3. Not supported on any `table` parts - See Firefox bug
  4. Supported on `th` elements, but not `thead` or `tr` - See Chrome bug
  5. Do not appear to support sticky table headers
  6. Supported on `th` elements, but not `thead` or `tr` - See Edge bug

Links

Full support table

IE

5.567891011
nnnnnnn

Edge

121314151617187980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
nnnnaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Firefox

233.53.6456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
nnnnnnnnnnnnnnnnnnnnnnnnnnn,dn,dn,dn,dn,dn,daaaaaaaaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Chrome

4567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
nnnnnnnnnnnnnnnnnnnn,dn,dn,dn,dn,dn,dn,dn,dn,dn,dn,dn,dn,dn,dnnnnnnnnnnnnnnnn,dn,dn,dn,daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari

3.13.2455.166.177.1899.11010.11111.11212.11313.11414.11515.115.2-15.315.415.515.616.016.116.216.316.416.516.617.017.117.217.317.417.517.618.018.118.218.318.418.5TP
nnnnnna,xa,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Opera

99.5-9.610.0-10.110.510.61111.111.511.61212.11516171819202122232425262728293031323334353637383940414243444546474849505152535455565758606263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn,dn,dn,daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari on iOS

3.24.0-4.14.2-4.35.0-5.16.0-6.17.0-7.188.1-8.49.0-9.29.310.0-10.210.311.0-11.211.3-11.412.0-12.112.2-12.513.0-13.113.213.313.4-13.714.0-14.414.5-14.815.0-15.115.2-15.315.415.515.6-15.816.016.116.216.316.416.516.6-16.717.017.117.217.317.417.517.6-17.718.018.118.218.318.418.5
nnnna,xa,xy,xy,xy,xy,xy,xy,xy,xy,xy,xy,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Opera Mini

all
n

Android Browser

2.12.22.3344.14.2-4.34.44.4.3-4.4.4136
nnnnnnnnny

Blackberry Browser

710
nn

Opera Mobile

101111.111.51212.180
nnnnnny

Chrome for Android

136
y

Firefox for Android

137
y

IE Mobile

1011
nn

UC Browser for Android

15.5
y

Samsung Internet

45.0-5.46.2-6.47.2-7.48.29.210.111.1-11.212.013.014.015.016.017.018.019.02021222324252627
nnyyyyyyyyyyyyyyyyyyyyyy

QQ Browser

14.9
a

Baidu Browser

13.52
y

KaiOS Browser

2.53.0-3.1
ay

Back to list

Data copyright caniuse.com