position:sticky is a new attribute of css positioning; it can be said to be a combination of static (no positioning) and fixed positioning fixed; it is mainly used to monitor the scroll event; in simple terms, during the sliding process, an element is far from its When the distance of the parent element reaches the requirement of sticky sticky positioning (such as top: 100px); the effect of position: sticky at this time is equivalent to fixed positioning, which is fixed to an appropriate position
Set position: sticky and give one of (top, bottom, right, left) at the same time
Conditions of Use:
Parent elements cannot overflow:hidden or overflow:auto attributes.
One of the 4 values of top, bottom, left, and right must be specified, otherwise it will only be in relative positioning
The height of the parent element cannot be lower than the height of the sticky element
sticky elements only take effect within their parent elements
pit in the project
Problem Description:
In a small program development project; the tabs component uses sticky positioning, which has the switching of the tab bar; the bottom of the tab bar is the display of the list-container content of the large list; the display content has a click event (or a touch event) ;The test for clicks in ios and PC browsers is normal; but in Android phones! ! ! ! OMG, the click penetrated! ! Also, try to remove the click jump of the item in the list-container, and find that the click of the tab switch does not respond, and the event disappears! ! ! Set a breakpoint and check the direction of the event flow: first, event capture-->target node tab-->event bubbling; this bubble actually bubbled up to the item in the container-list. . . The approximate project structure of a nightmare:
html structure:
<div class="service-wrap">
<tab>这是tab切换</tab>
<div class="list-container">
<!--for循环有很多item-->
<item></item>
<item></item>
</div>
</div>Solution:
When using the tab of the component library, set a div on the outer layer to prevent click penetration and abnormal event flow or (a method that treats the symptoms but not the root cause, depending on the business scenario)
.The style of the component library cannot be changed, and sticky is used as the inline style of the tab component, because when I use this tab, it is directly on the top of the view point, which can be achieved with fixed. I set position:fixed !import outside the calling class; the style has the highest priority to override the positioning style in the component library, and it is normal.