字典我要纠错

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.

Spec	https://drafts.csswg.org/css-position/#sticky-pos
Status	W3C Working Draft

IE	Edge	Firefox	Chrome	Safari	Opera
		57 ⁽³⁾	62 ⁽⁴⁾
		56 ⁽³⁾	61 ⁽⁴⁾	TP ^(*)	48 ⁽⁴⁾
	16	55 ⁽³⁾	60 ⁽⁴⁾	11 ^(*)	47 ⁽⁴⁾
11	15	54 ⁽³⁾	59 ⁽⁴⁾	10.1 ^(*)	46 ⁽⁴⁾
10	14	53 ⁽³⁾	58 ⁽⁴⁾	10 ^(*)	45 ⁽⁴⁾
9	13	52 ⁽³⁾	57 ⁽⁴⁾	9.1 ^(*)	44 ⁽⁴⁾
8	12	51 ⁽³⁾	56 ⁽⁴⁾	9 ^(*)	43 ⁽⁴⁾
Show all
7		50 ⁽³⁾	55 ⁽²⁾	8 ^(*)	42 ⁽⁴⁾
6		49 ⁽³⁾	54 ⁽²⁾	7.1 ^(*)	41 ⁽²⁾
5.5		48 ⁽³⁾	53 ⁽²⁾	7 ^(5,*)	40 ⁽²⁾
		47 ⁽³⁾	52 ⁽²⁾	6.1 ^(5,*)	39 ⁽²⁾
		46 ⁽³⁾	51	6	38
		45 ⁽³⁾	50	5.1	37
		44 ⁽³⁾	49	5	36
		43 ⁽³⁾	48	4	35
		42 ⁽³⁾	47	3.2	34
		41 ⁽³⁾	46	3.1	33
		40 ⁽³⁾	45		32
		39 ⁽³⁾	44		31
		38 ⁽³⁾	43		30
		37 ⁽³⁾	42		29
		36 ⁽³⁾	41		28
		35 ⁽³⁾	40		27
		34 ⁽³⁾	39		26
		33 ⁽³⁾	38		25
		32 ⁽³⁾	37		24
		31 ⁽¹⁾	36 ⁽²⁾		23
		30 ⁽¹⁾	35 ⁽²⁾		22
		29 ⁽¹⁾	34 ⁽²⁾		21
		28 ⁽¹⁾	33 ⁽²⁾		20
		27 ⁽¹⁾	32 ⁽²⁾		19
		26 ⁽¹⁾	31 ⁽²⁾		18
		25	30 ⁽²⁾		17
		24	29 ⁽²⁾		16
		23	28 ⁽²⁾		15
		22	27 ⁽²⁾		12.1
		21	26 ⁽²⁾		12
		20	25 ⁽²⁾		11.6
		19	24 ⁽²⁾		11.5
		18	23 ⁽²⁾		11.1
		17	22		11
		16	21		10.6
		15	20		10.5
		14	19		10.0-10.1
		13	18		9.5-9.6
		12	17		9
		11	16
		10	15
		9	14
		8	13
		7	12
		6	11
		5	10
		4	9
		3.6	8
		3.5	7
		3	6
		2	5
			4

iOS Safari	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser
11 ^(*)
10.3 ^(*)	all	56 ⁽⁴⁾	10	37	59 ⁽⁴⁾	54 ⁽³⁾	11	11.4	5	1.2 ⁽²⁾	7.12
10.0-10.2 ^(*)		4.4.3-4.4.4	7	12.1			10		4
9.3 ^(*)		4.4		12
9.0-9.2 ^(*)		4.2-4.3		11.5
Show all
8.1-8.4 ^(*)		4.1		11.1
8 ^(*)		4		11
7.0-7.1 ^(5,*)		3		10
6.0-6.1 ^(5,*)		2.3
5.0-5.1		2.2
4.2-4.3		2.1
4.0-4.1
3.2

Notes

Can be enabled in Firefox by setting the about:config preference layout.css.sticky.enabled to true
Enabled through the "experimental Web Platform features" flag
Not supported on any table parts - See Firefox bug
Supported on th elements, but not thead or tr - See Chrome bug

^* Partial support with prefix.

Bugs

Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also Firefox bug)
A parent with overflow set to auto will prevent position: sticky from working in Safari

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-sticky