css 属性 position:sticky (粘滞的) 制作导航吸顶效果

一、position:sticky (粘滞的)

1.简介

是 position:relation;和 position:fixed ;的结合体.

表现为 当有一个元素设置了 position:sticky的时候，这个元素滚动到距离顶部 0 像素的时候就会自动粘滞到顶部。 当然也不一定全部是粘滞到顶部，可以依据情况设置到底部或者左边或者右边。

一般适合用于新闻资讯类，有标题的部分可以粘滞在边缘，内容区域滚动即可。

2.实现原理

受父级元素的制约，就如 区域滚动类似，要想起作用父级元素只能设置 overflow：visible

同一个父级元素中设置了 position:sticky 元素，如果定位值相同，那么这些子元素 会重叠。如果属于不同的父元素，就会顶替之前的元素。

定位用的bottom，效果和top正好是对立的。设置top粘滞的元素随着往下滚动，是先滚动后固定；而设置bottom粘滞的元素则是先固定，后滚动；

3.实现的HTML结构最好如下类似

<article>
    <section>
        <h4>新闻主题1</h4>
        <content>
            <p>12月2日，有网友爆料称...</p>
        </content>
        <footer>网友评论：...</footer>
    </section>
    <section>
        <h4>新闻主题2</h4>
        <content>
            <p>主题2的主要内容……</p>
        </content>
        <footer>网友评论：...</footer>
    </section>
    ...
</article>

可如下设置position :sticky

article h4, 
h4 {
    position: sticky;
    top: 0;
    z-index: 1;
}
content {
    position: relative;
}
footer {
    position: sticky;
    bottom: 50vh;
    z-index: -1;
}

4.想要看效果的伙伴可以动动小手试一试，蛮有意思的~