position:sticky,Chrome新版本已经做了支持。sticky的中文翻译是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。
语法：
header { position: -webkit-sticky; position: sticky; top: 0; }
看个类似通讯录滚动的例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> article { max-width: 600px; margin: 1em auto; } article h4, article footer { position: -webkit-sticky; position: sticky; } article h4 { margin: 2em 0 0; background-color: #e68521; color: #fff; padding: 10px; top: 0; z-index: 1; } article content { display: block; background-color: #38C5A3; position: relative; padding: 1px 10px; } article footer { background-color: #f0f3f9; padding: 10px; bottom: 50vh;
/* 隐藏在.content后面，模拟看不到的效果 */ z-index: -1; } </style> </head> <body> <article> <!-- 1、和position:fixed;有着本质的区别position: sticky;完全受制于父级元素们。 --> <!-- 2、父级元素不能有任何overflow: visible;以外的任何overflow设置，否则没有效果。
如果你设置了，会改变滚动容器的原有表现，即使没出现滚动条。
所以，如果你设置了sticky，但没生效，你可以检查父元素们是否设置了overflow --> <!-- 3、同一个父元素中，多个相同定位的sticky元素，会重叠，
所以，你要实现类似通讯录导航的效果，注意把每个大类（A、B、C...）分别放在同级的不同子级中，如下面的例子 --> <!-- 4、sticky不仅可以设置top值，基于滚动容器上边缘定位，还可以设置bottom,也就是相对于底部、左侧、右侧sticky --> <section> <h4>A</h4> <content> <p>阿姨</p> <p>阿三</p> <p>阿四</p> </content> <footer>A结束</footer> </section> <section> <h4>B</h4> <content> <p>B一</p> <p>B二</p> <p>B三</p> </content> <footer>B结束</footer> </section> <section> <h4>C</h4> <content> <p>C一</p> <p>C二</p> <p>C三</p> </content> <footer>C结束</footer> </section> <section> <h4>D</h4> <content> <p>D一</p> <p>D二</p> <p>D三</p> </content> <footer>D结束</footer> </section> <section> <h4>E</h4> <content> <p>E一</p> <p>E二</p> <p>E三</p> </content> <footer>E结束</footer> </section> <section> <h4>F</h4> <content> <p>F一</p> <p>F二</p> <p>F三</p> </content> <footer>F结束</footer> </section> </article> </body> </html>
可以在移动端，尽情的戏耍啦~~~