position属性sticky

时间:2020-09-16
本文章向大家介绍 position属性sticky,主要包括 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>

 

$flag 上一页 下一页