前端学习之旅(五)【stick】

发布时间：2024年01月17日

任务

学习使用前端中的粘性定位stick

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>粘性定位</title>
    <style>
        .container {
            height: 2000px;
            background-color: gray;
        }

        .header {
            height: 80px;
            background-color: skyblue;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
        }

        .item-first {
            height: 50px;
            background-color: orange;
            line-height: 50px;
            font-size: 30px;
            position: sticky;
            top: 0;
        }

        .item {
            height: 30px;
            background-color: yellowgreen;
            line-height: 30px;
            font-size: 20px;
        }
        /* 可以解开下面的注释，更好的分析粘性定位 */
        /* #test {
            height: 200px;
            overflow: scroll;
        } */
    </style>
</head>

<body>
    <div class="container">
        <div class="header">标题栏</div>
        <div id="test">
            <div class="box">
                <div class="item-first">二级标题</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
            </div>
            <div class="box">
                <div class="item-first">二级标题</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
            </div>
            <div class="box">
                <div class="item-first">二级标题</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
                <div class="item">内容</div>
            </div>
        </div>
    </div>

</body>

</html>

总结

粘性定位的参考点是离它最近的一个拥有"滚动机制"的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

最常搭配top使用。

文章来源:https://blog.csdn.net/qq_62170186/article/details/135624662
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章