What is the effect of position: sticky, experience can try here demo

The parent element is a scroll container and the child element is set to position: sticky; It works, not the grandchild element.

In mobile projects, pull – down and pull – up refreshes are often added, requiring the top element, not the scroll container child element. Specific to how to solve, if you can’t think of a solution, we can directly refer to the implementation of the website, this is also a kind of lazy 😂.

First look at the card jingdong approach:

Look at taobao’s approach

Otherwise, it is found that the principle of their implementation: use the parent element onscroll to monitor the scrolling height, and set postion: fixed when the scrolling height reaches the top of the child element.