position属性sticky - 码农教程

在目标区域以内，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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: #333;color:#fff;position: sticky;top:-1px;z-index: 2;}
        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>

原文地址：https://www.cnblogs.com/jscai/p/13680187.html