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

Editor to share with you how to achieve the adsorption layout of 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 understand it!

Adsorption layout

The adsorption layout refers to the space-occupying layout in which any scrolling relative to the window can occupy a specific position. The window scrolls to a specific location, where the layout is fixed, and does not scroll as the window scrolls. The effect produced by this layout is commonly known as adsorption effect, which is a common web page effect. For example, top and bottom effects fall into this category and often appear in application scenarios such as following navigation, mobile ads, and hovering prompts.

In the era of jQuery, there were many adsorption plug-ins, and now the three front-end frameworks also have their own third-party adsorption effect components. They all share a common implementation principle: listening for scroll events, judging the location range of scrollTop and the target node, and declaring the position of the target node as fixed to position the target node relative to the window, making the user seem to be nailed to the specified position of the window.

JS to achieve the adsorption effect of the code on the Internet to search a lot, not to mention the author likes to play with CSS, here do not post the relevant JS code. A very rare CSS attribute, position:sticky, is recommended here. Simple two lines of core CSS code can complete the function of more than a dozen lines of core JS code, why not.

A brief review of the value of the position attribute, not to mention how to use it, should be familiar to everyone.

The value function version inherit inherits 2static standard stream 2relative relative positioning 2absolute absolute positioning 2fixed fixed positioning 2sticky sticky positioning 3

When the value is sticky, the node becomes sticky positioning. Viscous positioning is a combination of relative positioning and fixed positioning. Nodes are relative positioning before crossing a specific threshold and fixed positioning after crossing.

Top 1 Top 2 Normal Bottom 1 Bottom 2. Adsorption-position {overflow: auto; position: relative; width: 400px; height: 280px; outline: 1px solid # 3c9; ul {padding: 200px 0;} li {position: sticky; height: 40px; line-height: 40px; text-align: center; color: # fff &: nth-child (1) {top: 0; z-index: 9; background-color: # f66;} &: nth-child (2) {top: 40px; z-index: 9; background-color: # 66f } &: nth-child (3) {background-color: # f90;} &: nth-child (4) {bottom: 0; z-index: 9; background-color: # 09f;} &: nth-child (5) {bottom: 40px; z-index: 9 Background-color: # 3c9;}

The two core lines of CSS code are position:sticky and top/bottom:npx. The above five nodes all declare position:sticky, but they have different adsorption effects due to different top/bottom assignments.

Careful students may find that these nodes are relatively positioned at certain scrolling times and fixed at a specific scrolling time.

First: top is 0px. Scroll to the top of the container and fix it.

Second: top is 40px. Scroll to the top of the container and 40px will be fixed.

Third: keep relative positioning without declaring top/bottom

Fourth: bottom is 40px. Scroll to the bottom of the container and 40px will be fixed.

Fifth: bottom is 0px. Scroll to the bottom of the container and fix it.

Of course, left or right can also achieve the effect of lateral adsorption.

It is worth noting that the reference for viscous positioning is not necessarily position:fixed. When any ancestor node of the target node does not declare position:relative | absolute | fixed | sticky, the performance is consistent with position:fixed. When the ancestor node closest to the target node declares position:relative | absolute | fixed | sticky, the target node produces sticky positioning relative to the ancestor node. To put it simply, the way to confirm the reference is the same as that of position:absolute.

Compatibility is barely good. Browsers that have been released in the past 2 years can support it, and the compatibility between Safari and Firefox is still very good. Students with the need for adsorption effect suggest a try and forget it if it is compatible with IExplorer. Look forward to a better development of this attribute, after all, the adsorption layout is really a common layout.

The above is all the contents of the article "how to achieve adsorption layout 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.