position: sticky；粘性定位-蒲公英云

position: sticky；粘性定位

亦凉 2022-12-02 00:50 350阅读 0赞

想整个滚动条插件，但是里面的元素如果用absolute定位的话，会跟随滚动条滚动，fixed也不好用，偶然查到position: sticky；，确实可以解决这个问题（但兼容很差），先谷歌用着吧

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{ 
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .box { 
                height: 300px;
                width: 100%;
                margin: 0 auto;
                background-color: red;
                position: relative;
                overflow: scroll;
                margin-top: 20px;
            }
            .abso{ 
                position: sticky;
                top: 0;
                left:0;
                width: 110%;
                height: 50px;
                background-color: green;
            }
            .msg{ 
                width: 110%;
                height: 600px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="abso">
                123123
            </div>
            <div class="msg">
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
                <p>123123sdasd</p>
            </div>
        </div>
    </body>
</html>