Detailed explanation of CSS viscous positioning position: sticky problem pit

Time:2019-11-14

Position: sticky is a new attribute of CSS positioning; it can be said to be a combination of relative positioning and fixed positioning; it is mainly used to monitor the scroll event; simply speaking, in the sliding process, when the distance between an element and its parent element meets the requirements of sticky positioning (such as top: 100px); position: sticky is equivalent to fixed positioning Set in place.

Use:


#sticky-nav {
position: sticky;
top: 100px;
}

Set position: sticky and give one (top, bottom, right, left) at the same time

Service conditions:

1. The parent element cannot have the overflow: hidden or overflow: Auto attribute.

2. One of the four values of top, bottom, left and right must be specified, otherwise it will only be in relative positioning

3. The height of the parent element cannot be lower than that of the sticky element

4. Sticky element only takes effect in its parent element

Example: CSS code:


* {
            margin: 0;
            padding: 0
        }
        
        html body {
            height: 100vh;
            width: 100%
        }
        
        h1 {
            height: 200px;
            position: relative;
            background-color: lightblue;
        }
        
        h1:after {
            content: '';
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: red;
        }
        
        #sticky-nav {
            position: sticky;
            /*position: absolute;*
            left: 0;*/
            top: 100px;
            width: 100%;
            height: 80px;
            background-color: yellowgreen;
        }
        
        .scroll-container {
            height: 600px;
            width: 100%;
            background-color: lightgrey;
        }

HTML code:

<h1>200px high; 100px from the top</h1>
    < div id = "sticky NAV" > this is a tab switch bar. Position sticky at top = 100px < / div >
    < p class = "scroll container" > scrolling occurs</p>
    < p class = "scroll container" style = "background: lightgoldenrodyellow;" > scrolling occurs</p>

Pits encountered in the project:

First, let’s look at the support of position: sticky in each major internal check

Problem Description:

In a small program development project, the tabs component uses sticky positioning, in which there is the switch of the tab column; at the bottom of the tab column is the display of a large list of contents list container content; in which the display content includes click event (or touch event); IOS and PC browser are normal for the test of click; but in Android phone!!!! My God, click through!! In addition, try to remove the click jump of item in list container, and find that the click of tab switch has no response, and the event disappears!!!

Set the breakpoint to view the trend of the event flow: first, the event catches the event bubble of the target node tab; the bubble actually comes to the item in the container list… Nightmare project structure:

HTML structure:

<div class="service-wrap">
        < tab > this is the tab switch < / tab >
        <div class="list-container">
            There are many items in the <! -- for loop -- >
            <item></item>
            <item></item>
        </div>
    </div>

terms of settlement:

1. When using the tab of the component library, set a div on the outer layer to prevent the click through and abnormal event flow direction or (a method to cure the symptoms but not the root causes, see the business scenario for details)

2. The style of the component library cannot be changed. Sticky is the inline style of the tab component, because when I use this tab, it is directly at the top of the viewpoint, which can completely achieve the effect with fixed. I set the position: fixed! Import; the highest priority of the style to override the positioning style in the component library, which is normal.

One idea:

Position: sticky’s compatibility with Android makes people want to cry. At present, there are a lot of users on the mobile phone, so we need to give consideration to it. Because of the poor support of Android system for sticky’s sticky positioning, if the business scenario can be solved by other positioning, it’s better not to use sticky…. Leave behind sad tears….

PS: there are other solutions. Please let me know. Thank you.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.