你不知道的sticky

position:sticky,Chrome新版本已经做了支持。sticky的中文翻译是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

语法：

header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

看个类似通讯录滚动的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
    article {
        max-width: 600px;
        margin: 1em auto;
    }
    article h4, 
    article footer {
        position: -webkit-sticky;
        position: sticky;
    }
    article h4 {
        margin: 2em 0 0;
        background-color: #e68521;
        color: #fff;
        padding: 10px;
        top: 0;
        z-index: 1;
    }
    article content {
        display: block;
        background-color: #38C5A3;
        position: relative;
        padding: 1px 10px;
    }
    article footer {
        background-color: #f0f3f9;
        padding: 10px;
        bottom: 50vh;
　　　　　/* 隐藏在.content后面，模拟看不到的效果 */
        z-index: -1;
    }
    
</style>
</head>
<body>
    <article>
        <!-- 1、和position:fixed;有着本质的区别position: sticky;完全受制于父级元素们。 -->
        <!-- 2、父级元素不能有任何overflow: visible;以外的任何overflow设置，否则没有效果。
　　　　　　如果你设置了，会改变滚动容器的原有表现，即使没出现滚动条。
　　　　　　所以，如果你设置了sticky，但没生效，你可以检查父元素们是否设置了overflow -->
        <!-- 3、同一个父元素中，多个相同定位的sticky元素，会重叠，
　　　　　　　　所以，你要实现类似通讯录导航的效果，注意把每个大类（A、B、C...）分别放在同级的不同子级中，如下面的例子 -->
        <!-- 4、sticky不仅可以设置top值，基于滚动容器上边缘定位，还可以设置bottom,也就是相对于底部、左侧、右侧sticky -->
        <section>
            <h4>A</h4>
            <content>
                <p>阿姨</p>
                <p>阿三</p>
                <p>阿四</p>
            </content>
            <footer>A结束</footer>
        </section>
        <section>
            <h4>B</h4>
            <content>
                <p>B一</p>
                <p>B二</p>
                <p>B三</p>
            </content>
            <footer>B结束</footer>
        </section>
        <section>
            <h4>C</h4>
            <content>
                <p>C一</p>
                <p>C二</p>
                <p>C三</p>
            </content>
            <footer>C结束</footer>
        </section>
        <section>
            <h4>D</h4>
            <content>
                <p>D一</p>
                <p>D二</p>
                <p>D三</p>
            </content>
            <footer>D结束</footer>
        </section>
        <section>
            <h4>E</h4>
            <content>
                <p>E一</p>
                <p>E二</p>
                <p>E三</p>
            </content>
            <footer>E结束</footer>
        </section>
        <section>
            <h4>F</h4>
            <content>
                <p>F一</p>
                <p>F二</p>
                <p>F三</p>
            </content>
            <footer>F结束</footer>
        </section>
    </article>
</body>
</html>

可以在移动端，尽情的戏耍啦~~~

猜你喜欢