css3 header.sticky,css中sticky属性

sticky粘性定位

是css新增属性

其实就是以往我们做的fixed;当滚动条下拉到一定程度设置容器为fixed；

用图来演示：

275c408a6565d504d94cbf82d09012f9.gif

常见场景：通讯录及头部工具条

Document

html{background:#f5f5f5;}

body{min-height: 1280px;max-width: 640px;margin:0 auto;background:#fff;}

*{margin:0;padding:0;}

.nav{color: #fff;font-size: 24pt;padding:0 10px; position: sticky; top: 0px;height: 50px;background: #067;}

p{line-height: 2; }

A

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.

B

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.

C

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.

D

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.

兼容情况

af7cbb09db9572b9fbe27a67b7cc129c.png