position:sticky

1、position:sticky简介

设置了position:sticky的元素并不会脱离文档流。

• 当元素在区域内，元素不受定位的影响（top、left等设置无效）
• 当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是fixed效果

  <div class="sticky">
        position:sticky
    </div>

   .sticky{
      width:300px;
      height: 40px;
      background-color: lightseagreen;
      position:sticky;
      top:0;
   }

2、必须注意的点

设置了position:sticky的元素的效果完全受制于父级元素。

此外，还遵循以下条件

1. 父级元素不能有任何overflow:visible以外的overflow设置。即使是scroll或者auto也不行。
2. 父元素的高度不能低于sticky元素的高度
3. 同一父容器中的sticky元素，如果定位置相等，则会发生重叠，
4. sticky元素如果不属于相同父元素，但是他們的父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。
5. 必须制定top,left,bottom,right四个中的至少一个，否则其行为与相对定位相同，并且top和bottom同时设置时，top的优先级高；left和right同时设置时，left的优先级高。

3、简单示例

3.1 同一父容器中的sticky元素

    <div class="sticky">
        <div>孵化基地发挥地方发挥地方</div>
        <div>孵化基地发挥地方发挥地方</div>
        <div>孵化基地发挥地方发挥地方</div>
    </div>

        .sticky {
            width:300px;
            height: 400px;             
        }
        .sticky div{
            position: sticky;
            top:0px;
            height: 60px;
            background-color: lightpink;
            margin-bottom: 20px;
        }

可以看到，这些stick元素位于同一个父容器内时，当滚动的一定位置时，后面的会覆盖前面的

3.2 sticky元素不属于同一父元素，但父元素正好紧密相连

(为了录制 细节 以及手动操作的 的原因，看着不是很流畅。。。。。实际上很顺滑的。。。)

        article h4 {   
            position: sticky;   
            background-color: lightseagreen;
            color: #fff;
            padding: 10px;
            top: 0;       
        }
        article div{
            background-color: lightskyblue;
        }

    <article>
        <section>
            <h4>
                湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
            </h4>
            <div>
                http.createServer(function (request, response) {
                console.log(request.url,request.pathname,'---------')
                //var pathname=url.parse(request.url).pathname;
                var pathname=(request.url).slice(1)||"drag.html";
                console.log(" 请求 "+pathname+"收到了");
            </div>
        </section>
        <section>
            <h4>
                湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
            </h4>
            <div>
                http.createServer(function (request, response) {
                console.log(request.url,request.pathname,'---------')
                //var pathname=url.parse(request.url).pathname;
                var pathname=(request.url).slice(1)||"drag.html";
                console.log(" 请求 "+pathname+"收到了");
            </div>
        </section>
        <section>
            <h4>
                湖人捧奖杯致敬科比鲁UT4923乘客请检测进博会实行核酸检测丰田c_hr青岛已排查密接132人
            </h4>
            <div>
                http.createServer(function (request, response) {
                console.log(request.url,request.pathname,'---------')
                //var pathname=url.parse(request.url).pathname;
                var pathname=(request.url).slice(1)||"drag.html";
                console.log(" 请求 "+pathname+"收到了");
            </div>
        </section>  
    </article>