position:sticky属性测试 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            width: 100%;
            height: 1000px;
            background-color: #ccc;
        }
        .header {
            width: 100%;
            line-height: 80px;
            background-color: #999;
            position: sticky; /*关键属性*/
            top: 0; /*设定固定位置*/
        }
    </style>
</head>
<body>
    <div class="top">
        这是测试文字
    </div>
    <div class="header">
        这是要固定的导航
    </div>
    <div class="top">
        这是测试文字
    </div>
    <p>文字</p>
</body>
</html>

除了兼容性不太好之外，还是挺好用的。

posted @ 2018-07-06 11:33  青芒灬  阅读(199)  评论(0)  编辑  收藏  举报