position: -webkit-sticky； /* for Safari */ position: sticky；

            <div >Chrome Kill a rifle </a><a href="javascript:">position:sticky brief introduction </a><a href="javascript:" class="title-nav-li" title=" Hierarchical scrolling interaction "> Hierarchical scrolling interaction </a><a href="javascript:" > You may not know position:sticky</a><a href="javascript:" class="title-nav-li" title=" Implementation principle of hierarchical rolling "> Implementation principle of hierarchical rolling </a><a > What is the most important thing in a man's life ？</a></div></div>
            <article><p class="link">by <a href="https://www.zhangxinxu.com/">zhangxinxu</a> from <a href="https://www.zhangxinxu.com/wordpress/?p=8244">https://www.zhangxinxu.com/wordpress/?p=8244</a><br>

This article can be reproduced in full , Personal websites do not require authorization , Just keep the original author 、 The source and the link in the article can , Any website can aggregate abstracts , For business, please contact the authorized .

One 、Chrome Kill a rifle

position:sticky I've heard about it for a long time, and I also know it , later ,Chrome Gave up support for it , I don't care about this statement , By chance today , Oh my god ,Chrome When did you kill a rifle , Unexpectedly, I supported . Look at , Various browsers have set up mountains , It is necessary to care position:sticky 了 , Don't be left with a tongue of favoritism .

Safari At present, we still need -webkit- Private prefix .

Two 、position:sticky brief introduction

word sticky The Chinese meaning is “ Sticky ”,position:sticky The performance is also consistent with the performance of stickiness . Basically , It can be seen that it is position:relative and position:fixed The combination of —— When the element is in the screen , Manifested as relative, Just about to get out of the monitor screen , Manifested as fixed. for example , You can scroll through the box below to feel the interactive performance ：

The navigation element is set as follows CSS：

nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

therefore , As you can see , As the page scrolls , When the navigation distance is above the edge 0 At a distance , Stuck to the upper edge , Act like position:fixed.

//zxx: position:sticky To be effective ,top Attribute or left attribute （ Look at the rolling direction ） It is necessary to have clear calculation value , otherwise fixed Will not show up .

This is it. position:sticky The most basic performance , Especially suitable for the following and positioning effect of navigation .

Many people think position:sticky Just the above effect , It's like thinking it's an ordinary slim , actually ,position:sticky It can achieve extremely high cost performance , There is even a little cool interactive layout effect . Hey , This is the emperor's night pot —— Not everyone can see it .

3、 ... and 、 Hierarchical scrolling interaction

Scroll the scroll bar of the embedded page below , We can see that the news headlines are pushed up in turn , Netizens' comments will also come out from behind at the right time .

If the above page does not display , You can click here ：position:sticky Realize hierarchical scrolling interaction demo

GIF The screen recording effect is as follows ：

Four 、 You may not know position:sticky

position:sticky There is a very important feature , That's it sticky The element effect is completely controlled by the parent elements .

This sum position:fixed Positioning is fundamentally different ,fixed The element goes directly to the root element of the page , Other parent elements on it left/top Positioning cannot be restricted .

According to my simple test , Found out sticky The following characteristics of the element are shown ：

1. The parent element cannot have any overflow:visible Outside of the overflow Set up , Otherwise, there is no stickiness . Because it changed the rolling container （ Even if there is no scroll bar ）. therefore , If your position:sticky Invalid , Let's see if an ancestor element is set up overflow:hidden, Remove it .
2. 2019-05-22 newly added
   The parent element settings and sticky positioning elements are fixed at the same height height Height value , Or the height calculation value is the same as the height of the viscous positioning element , There is no sticky effect . I specially wrote an article to explain in depth the reasons why the viscous effect is invalid , Sure Click here .
3. In the same parent container sticky Elements , If the positioning values are equal , It will overlap ; If it belongs to a different parent element , And these parent elements are just closely connected , Then the dove will occupy the magpie's nest , Squeeze out the original elements , To form a sequential occupying effect . As for the reason, we need to understand the calculation rules of viscous positioning , Again Click here .
4. sticky location , Not only can you set top, Positioning based on the upper edge of the rolling container ; You can also set bottom, That is, it is sticky relative to the bottom . If it's horizontal scrolling , You can also set left and right value .

below , Let's take a look at the implementation principle of hierarchical rolling effect .

5、 ... and 、 Implementation principle of hierarchical rolling

First ,HTML The structure is as follows （ Structure is important ）：

<article>
    <section>
        <h4> The Internet revealed that Wang Baoqiang beat Ma Rong </h4>
        <content>
            <p>12 month 2 Japan , Some netizens revealed that ...</p>
        </content>
        <footer> The net friend comment on ：...</footer>
    </section>
    <section>
        <h4> Insiders broke the news that Ma Rong broke into Wang Baoqiang's house and confronted him with scissors </h4>
        <content>
            <p>...</p>
        </content>
        <footer> The net friend comment on ：...</footer>
    </section>
    ...
</article>

among , title <h4> And the bottom <footer> Set up sticky location , as follows ：

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

Because every piece of short news is section In the label , Belong to different parent elements , therefore , When rolling , Only when the news headline in the back can the front have sticky Push away the targeted news headlines , This is a sticky Locate natural features , There is no need for JavaScript With the help of the .

If , We have HTML Adjust the structure , The titles are all level , as follows ：

<article>
    <section>
        <h4> The Internet revealed that Wang Baoqiang beat Ma Rong </h4>
        <content>
            <p>12 month 2 Japan , Some netizens revealed that ...</p>
        </content>
        <footer> The net friend comment on ：...</footer>
        <!--  Next short news  -->
        <h4> Insiders broke the news that Ma Rong broke into Wang Baoqiang's house and confronted him with scissors </h4>
        <content>
            <p>...</p>
        </content>
        <footer> The net friend comment on ：...</footer>
    </section>
    ...
</article>

Then the final effect is all sticky The targeted news headlines will overlap , This is not the effect we want . therefore , Keep sth. in mind ,position:sticky When it comes to layout , Use the right HTML Structure is important .

---

In effect , How to achieve the effect of netizen comments from the back ？

Two key points ：

1. For positioning bottom, Effect and top Just opposite . Set up top Sticky elements scroll down with , It's rolling first and then fixing ; And set up bottom Sticky elements are fixed first , Roll back ;
2. z-index:-1 Let netizens comment footer The elements are hidden content Behind , So there was “ You cover your face with a lute ” The effect of .

position:sticky polyfill

CSS `position: sticky` Declarative Polyfill Address ：https://github.com/wilddeer/stickyfill

Compatible with IE9 And above .