Shulou(Shulou.com)06/01 Report--

Editor to share with you the example analysis of position:sticky in css, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The preface to the attempt of css position:sticky

The design effect of sticky often occurs, such as the toolbar on the right side of Tao Bao. When we scroll down to its position, it will stick to the top and follow the scrolling effect, similar to the effect of position: fixed, except that the trigger condition triggers the fixed effect when we scroll to its position:

We often use JavaScript to listen for scrolling events and deal with them. For example, we will use some plug-ins like stickyjs, http://stickyjs.com/. Position:sticky in css has been created for this design since around 2017. Let's take a look at it today.

Compatibility

For almost two years, compatibility is OK. I think it can be used for projects that are aimed at technicians and background managers. after all, they can not only experience better results by upgrading their browsers, but also reduce the workload of programmers.

Study and use

Let's achieve the effect on the right side of Tao Bao, which is very simple. There is nothing to learn, just set it up directly:

.sidebar {position:-webkit-sticky; position: sticky; top: 0;}

There is also a design effect, such as the superposition effect can also be achieved, there are many effects, you can play freely according to the sticky features: overlay effect: https://jsbin.com/fegiqoquki/edit?html,css,output

Characteristics

A very important feature of position:sticky is that the effect of the sticky element is completely controlled by the parent elements. If you find that you have a great effect, you can check for two reasons:

The parent element cannot have any overflow settings other than overflow:visible, otherwise it has no effect because the scroll container has been changed (even if the scroll bar does not appear).

The height of the parent element is too small to scroll through the stikcy block, and it will have no effect.

The above is all the content of the article "sample Analysis of position:sticky in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.