你不知道的sticky

position:sticky,Chrome新版本已经做了支持。sticky的中文翻译是“粘性的”,position:sticky表现也符合这个粘性的表现。基本上,可以看出是position:relativeposition: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>Examplestitle>
    <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> <section> <h4>Ah4> <content> <p>阿姨p> <p>阿三p> <p>阿四p> content> <footer>A结束footer> section> <section> <h4>Bh4> <content> <p>B一p> <p>B二p> <p>B三p> content> <footer>B结束footer> section> <section> <h4>Ch4> <content> <p>C一p> <p>C二p> <p>C三p> content> <footer>C结束footer> section> <section> <h4>Dh4> <content> <p>D一p> <p>D二p> <p>D三p> content> <footer>D结束footer> section> <section> <h4>Eh4> <content> <p>E一p> <p>E二p> <p>E三p> content> <footer>E结束footer> section> <section> <h4>Fh4> <content> <p>F一p> <p>F二p> <p>F三p> content> <footer>F结束footer> section> article> body> html>

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

转载于:https://www.cnblogs.com/whq920729/p/10794995.html

你可能感兴趣的:(你不知道的sticky)