position-sticky

position:sticky简介

单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。
基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。
你可以点击 此处 感受一下。

不过应用此属性需要注意html布局配合，以下是css样式及html结构，具体体会你将在使用时，切身体会到：

css

h4 {
    position: sticky;
    z-index: 1;
    top: 0;
}

div {
    position: relative;
    background-color: #7FDBFF;
}

span {
    display: block;
    position: sticky;
    bottom: 50%;
    z-index: -1;
    background: #2ECC40;
}

html

<ul>
    <li>
        <h4>我是标题1</h4>
        <div>
            <p>我是内容......</p>
            <p>我是内容......</p>
            <p>我是内容......</p>
            <p>我是内容......</p>
            <p>我是内容......</p>
            <p>我是内容......</p>
            <p>我是内容......</p>
        </div>
        <span>我是footer</span>
    </li>
</ul>

示例：请点这里