position属性sticky
在目标区域以内，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <p>尝试滚动页面。</p> <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p> <div class="sticky">我是粘性定位!</div> <div style="padding-bottom:2000px"> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> <p>滚动我</p> <p>来回滚动我</p> </div> </body> </html>
根据特性实现表格的冻结列效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body{
margin:0px;
}
table{border-collapse: collapse;}
th,td{padding: 5px;text-align: center;border:2px solid #999;min-width: 100px;}
th{background-color: red;color:#fff;position: sticky;top:-1px;z-index: 2;}
th:first-child{z-index: 3;left:0px;}
th:nth-child(2){z-index: 3;left:110px;}
td:first-child{background-color: #333;color: #fff;position: sticky;left:0px; border:2px solid #999;}
td:nth-child(2){background-color: #333;color: #fff;position: sticky;left:111px;border:2px solid #999;}
</style>
<script src="https://cdn.staticfile.org/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded",function(){
let t = new Vue({el:"#t"});
});
</script>
</head>
<body>
<table id="t">
<thead>
<tr>
<th v-for="(n,i) of 50">字段 {{i+1}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(n,i) of 100">
<td v-for="(m,j) of 50">{{j+1}}</td>
</tr>
</tbody>
</table>
</body>
</html>
html结构
<div class="service-wrap"> <tab>这是tab切换</tab> <div class="list-container"> <!--for循环有很多item--> <item></item> <item></item> </div> </div>
