sticky布局

使用方式

        <style>
            .body{
                background-color: orange;
            }
            .body-title {
                position: sticky;
                top: 0;
            }
        </style>
        <div class="body">
                <div class="body-title">内容标题</div>
                <div class="body-body">
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                    <p>4</p>
                    <p>5</p>
                    <p>6</p>
                    <p>7</p>
                    <p>8</p>
                    <p>9</p>
                    <p>10</p>
                </div>
            </div>

当页面高度不足时，会出现滚动条。滚动即可看见效果。
需要注意的是 sticky元素 的高度要小于父容器。

sticky元素可以放在任何滚动容器中，需要注意的是 sticky元素外层任意元素不可设置 overflow:hidden 属性 ，否则sticky将失效。