使用場景

sticky：粘性。粘性佈局。

在螢幕範圍內時，元素不受定位影響（即top、left等設定無效）；

當元素的位置將要移出偏移範圍時，定位又會變成fixed，根據設定的left、top等屬性成固定位置的效果。

說明：元素並沒有脫離文件流。

1.示例一：

<div class="container">
      <div class="sticky-box">內容1</div>
      <div class="sticky-box">內容2</div>
      <div class="sticky-box">
 
內容3</div>
      <div class="sticky-box">內容4</div>
</div>

.container {
                width: 600px;
                height: 10000px;
                margin: 0 auto;
                border: solid 1px red;
            }

            .sticky-box {
                position: -webkit-sticky
 
;
                position: sticky;
                height: 60px;
                margin-bottom: 30px;
                background: #ff7300;
                top: 0px;
                font-size: 30px;
                text-align: center;
                color: #fff;
                line-height: 60px;
            }

2.示例二：

<div class="container">
            <nav>我是導航欄</nav>
            <div class="content">
                <p>我是內容欄</p>
                <p>我是內容欄</p>
                <p>我是內容欄</p>
                <p>我是內容欄</p>
                <p>我是內容欄</p>
                <p>我是內容欄</p>
                <p>我是內容欄</p>
                <p>我是內容欄</p>
            </div>
        </div>

.container {
                width: 600px;
                height: 10000px;
                margin: 0 auto;
                border: solid 1px red;
            }
            nav {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
            }
            nav {
                height: 50px;
                background: #999;
                color: #fff;
                font-size: 30px;
                line-height: 50px;
            }
            .content {
                margin-top: 30px;
                background: #ddd;
            }
            p {
                line-height: 40px;
                font-size: 20px;
            }