CSS教程
CSS进阶

CSS sticky

CSS position属性用于设置元素的位置。它还用于将项目放置在另一个元素后面,并且对于脚本化动画效果很有用。 " position:sticky;" 用于根据用户的滚动位置定位元素。
此CSS属性允许元素在滚动到某一点。取决于滚动位置,粘性元素会在 fixedrelative"之间切换。元素将被定位为 relative ,直到指定的offset位置为在视口中相遇。然后,类似于 position:fixed (固定位置),该元素停留在一个位置。
让我们尝试使用插图来了解此CSS属性。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
    body {
        text-align: center;
    }
    .stick {
        position: sticky;
        top: 50px;
        padding: 10px;
        font-size: 20px;
        font-weight: bold;
        background-color: lightblue;
        border: 1px solid blue;
    }
    </style>
</head>
<body>
    <h1>Scroll and see the effect!</h1>
    <div class="stick">Sticky Element</div>
    <div style="padding-bottom:2000px">
        <h2>Hello World</h2>
        <h2>Welcome to lidihuo.com</h2>
    </div>
</body>
</html>
输出:
sticky
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4