Detailed explanation of the sticky position attribute in CSS

When developing mobile apps, you often encounter a situation where you need to make part of the content appear as a navbar when the website scrolls to a certain height. We usually use js to listen to the scroll event to achieve this, but the newly added CSS attribute position:sticky can be easily achieved.

I'm not the last one to know: position: sticky

The meaning of position refers to the positioning type. The possible value types are: static, relative, absolute, fixed, inherit and sticky. Here sticky is a newly released attribute of CSS3. What I want to focus on today is the sticky attribute

Usage of position:sticky

• position:sticky is called a sticky positioned element, which is an element whose calculated position attribute is sticky.
• The simple understanding is: within the target area, it behaves like position:relative; during the sliding process, when the distance between an element and its parent element reaches the requirement of sticky positioning (for example, top: 100px); the effect of position:sticky at this time is equivalent to fixed positioning, fixed to the appropriate position.
• It can be said to be a combination of relative positioning and fixed positioning.
• The fixed relative offset of an element is relative to its nearest ancestor element with a scroll box. If none of the ancestor elements can be scrolled, the offset of the element is calculated relative to the viewport.

Conditions for using position:sticky

1. The parent element cannot have overflow:hidden or overflow:auto attributes. 2. One of the top, bottom, left, and right values ​​must be specified, otherwise it will only be relatively positioned 3. The height of the parent element cannot be lower than the height of the sticky element 4. The sticky element is only effective within its parent element

example

When the mouse slides down to a certain height, the position:sticky positioning requirement is triggered, so that "Popular, New, Featured" is fixed at 44px from the top.

CSS Code

.tab-control{
  position: sticky;
  top: 44px;
}

HTML area

<tab-control class="tab-control" :titles="['Popular','New','Featured']"></tab-control>

Pay attention to compatibility in web development:

Sticky is still an experimental attribute and is not a W3C recommended standard. It occurs because listening to scroll events to implement sticky layout puts the browser into slow scrolling mode, which is contrary to the browser's desire to improve the scrolling experience through hardware acceleration. For details, see the figure below. Basically, the only browsers that use this property are Firefox and iOS Safari.

Summarize

This is the end of this article about the detailed explanation of the sticky position attribute in CSS. For more relevant content about the sticky position attribute in CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!