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

This article mainly explains "how to achieve the adsorption effect of CSS". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve the adsorption effect of CSS".

Principle

In the era of jQuery, there have been many adsorption plug-ins, and now the three commonly used front-end frameworks also have their own third-party adsorption components. They all share a common implementation principle: listening for scroll events, judging the location range of scrollTop and target elements, and declaring the position of the target elements as fixed if they meet the conditions, so that the target elements are positioned relative to the browser window, so that the user seems to be nailed to the specified location of the browser.

Javascript 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. This article recommends a very rare and rarely used CSS attribute: position:sticky. Simple "two lines of CSS core code" can complete the function of "more than a dozen lines of JS core code". Why not do it?

Realize

A brief review of the commonly used values of position, not to mention how to use it, all students should be familiar with it.

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

When the value is sticky, the element becomes sticky positioning. "viscous positioning" is a combination of relative positioning and fixed positioning. Elements are relative positioning before crossing a specific threshold and fixed positioning after crossing.

Mainly in order to promote knowledge points, directly on the code, the style is not fine grinding, will look at it.

Top 1 Top 2 Normal Bottom 1 Bottom 2. Ads-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 final effect is as follows. The two core lines of CSS code are position:sticky and top/bottom:npx. All the five nodes in the above Demo declare position:sticky, but they have different adsorption effects due to different top/bottom assignments.

Careful students may find that these elements are relatively positioned at certain scrolling times and fixed at a particular 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 the relative position 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 and right can also achieve the effect of lateral adsorption.

Be careful

The reference for viscous positioning is not necessarily position:fixed.

The performance is consistent with position:fixed when any ancestor element of the target element does not declare position:relative | absolute | fixed | sticky.

When the ancestor element closest to the target element declares position:relative | absolute | fixed | sticky, the target element is stickily positioned relative to that ancestor element.

Make sure the reference is consistent with position:absolute.

Compatible

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.

Thank you for your reading, the above is the content of "how to achieve the adsorption effect of CSS". After the study of this article, I believe you have a deeper understanding of how to achieve the adsorption effect of CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.