css的sticky制作的吸顶

百里挑单

于 2019-08-01 18:02:27 发布

阅读量162

点赞数 1

文章标签： css 吸顶 sticky

本文链接：https://blog.csdn.net/qq_37056728/article/details/98084454

版权

开发过程中有用到吸顶的操作：到一定距离后，到浏览器顶部的距离不动，，sticky的应用简单又易理解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" />
        <style type="text/css">
            .box1 {
                height: 200px;
                background-color: aqua;
            }
            .box2 {
                /* 本身的高度 */
                height: 70px;
                background-color: red;
                transition: 0.9 ease;
                /* 吸顶属性 */
                position: sticky;
                z-index: 9;
                /* 吸顶时候的距离 */
                top: 80px;
            }
            .box3 {
                height: 1920px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="box1">顶部距离</div>
            <div class=" box2">吸顶部分</div>
            <div class="box3">剩余部分</div>
        </div>
    </body>
</html>

百里挑单

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的sticky制作的吸顶

开发过程中有用到吸顶的操作：到一定距离后，到浏览器顶部的距离不动，，sticky的应用简单又易理解<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" /> <styl...
复制链接

扫一扫