position新增的css3属性之sticky
sticky是粘的意思，在css 中的表现为吸附。
常见吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合
吸顶的效果我们之前的做法是：在页面打开的时设置position为relative 的，向下滑动的时将position设置为 fixed 并且 top：0
这种处理方案用过的人会知道，会出现跳块的问题，需要垫东西。
现在有了sticky属性，很简单很平滑的实现吸顶/吸底效果：
.sticky {
position:sticky;
position:-webkit-sticky;
top:0;
}
top:0 吸顶 bottom：0 吸底
目前兼容性不太好，开发的时请注意，http://caniuse.com/ 进行查看。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>sticky</title>
<style>
li.item {
background: lightblue;
list-style: none;
height: 50px;
line-height: 50px;
}
ul.container {
padding: 0;
margin: 0;
}
body {
margin: 0;
}
li.item.sticky {
position: sticky;
position:-webkit-sticky;
top: 0;
left: 0;
background: lightcoral;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="container">
<li class="item">num1：Be calm~ Have Faith~</li>
<li class="item">num2：Be calm~ Have Faith~</li>
<li class="item">num3：Be calm~ Have Faith~</li>
<li class="item">num4：Be calm~ Have Faith~</li>
<li class="item">num5：Be calm~ Have Faith~</li>
<li class="item">num6：Be calm~ Have Faith~</li>
<li class="item">num7：Be calm~ Have Faith~</li>
<li class="item">num8：Be calm~ Have Faith~</li>
<li class="item">num9：Be calm~ Have Faith~</li>
<li class="item">num10:Be calm~ Have Faith~</li>
<li class="item">num11:Be calm~ Have Faith~</li>
<li class="item">num12:Be calm~ Have Faith~</li>
<li class="item">num13:Be calm~ Have Faith~</li>
<li class="item">num14:Be calm~ Have Faith~</li>
<li class="item">num15:Be calm~ Have Faith~</li>
<li class="item">num16:Be calm~ Have Faith~</li>
<li class="item">num17:Be calm~ Have Faith~</li>
<li class="item">num18:Be calm~ Have Faith~</li>
<li class="item">num19:Be calm~ Have Faith~</li>
<li class="item">num20:O.Be calm~ Have Faith~</li>
<li class="item sticky">num21:~~~ 滑到顶部就置顶^_^ ~~~</li>
<li class="item">num22:Be calm~ Have Faith~</li>
<li class="item">num22:Be calm~ Have Faith~</li>
<li class="item">num23:Be calm~ Have Faith~</li>
<li class="item">num24:Be calm~ Have Faith~</li>
<li class="item">num25:Be calm~ Have Faith~</li>
<li class="item">num26:Be calm~ Have Faith~</li>
<li class="item">num27:Be calm~ Have Faith~</li>
<li class="item">num28:Be calm~ Have Faith~</li>
<li class="item">num29:Be calm~ Have Faith~</li>
<li class="item">num30:Be calm~ Have Faith~</li>
<li class="item">num31:Be calm~ Have Faith~</li>
<li class="item">num32:Be calm~ Have Faith~</li>
<li class="item">num33:Be calm~ Have Faith~</li>
<li class="item">num34:Be calm~ Have Faith~</li>
<li class="item">num35:Be calm~ Have Faith~</li>
<li class="item">num36:Be calm~ Have Faith~</li>
<li class="item">num37:Be calm~ Have Faith~</li>
<li class="item">num38:Be calm~ Have Faith~</li>
<li class="item">num39:Be calm~ Have Faith~</li>
<li class="item">num40:Be calm~ Have Faith~</li>
<li class="item">num41:Be calm~ Have Faith~</li>
<li class="item">num42:Be calm~ Have Faith~</li>
<li class="item">num43:Be calm~ Have Faith~</li>
<li class="item">num44:Be calm~ Have Faith~</li>
<li class="item">num45:Be calm~ Have Faith~</li>
<li class="item">num46:Be calm~ Have Faith~</li>
<li class="item">num47:Be calm~ Have Faith~</li>
<li class="item">num48:Be calm~ Have Faith~</li>
<li class="item">num49:Be calm~ Have Faith~</li>
<li class="item">num50:Be calm~ Have Faith~</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号