Detailed explanation of CSS sticky positioning position: sticky problem pit

Preface: 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 scroll events; in simple terms, during the sliding process, when the distance between an element and its parent element reaches the requirement of sticky positioning (such as top: 100px); the effect of position:sticky at this time is equivalent to fixed positioning, fixed to the appropriate position.

use:

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

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

Conditions of use:

1. The parent element cannot have overflow:hidden or overflow:auto attributes.

2. You must specify one of the top, bottom, left, and right values, otherwise it will only be in relative positioning

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

4. Sticky elements are only effective within their parent elements

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 top</h1>
    <div id="sticky-nav">This is a tab switch bar, position the sticky at top=100px</div>
    <p class="scroll-container">Scrolling occurs</p>
    <p class="scroll-container" style="background:lightgoldenrodyellow;">Scrolling occurs</p>

Pitfalls encountered in the project:

First, let's take a look at the support of position:sticky for each kernel.

Problem description:

In a small program development project; the tabs component uses sticky positioning, which includes the switching of the tab bar; at the bottom of the tab bar is the display of the list-container content of a large list; the displayed content has a click event (or touch event); the test of clicks in iOS and PC browsers is normal; but in Android phones! ! ! ! Oh my god, the click went through! ! Also, I tried to remove the click jump of the item in the list-container and found that the click of the tab switch had no response and the event disappeared! ! !

Set a breakpoint to view the direction of the event flow: first, event capture --> target node tab --> event bubbling; this bubble actually reaches the item in the container-list. . . A nightmare. Roughly speaking, the project structure is:

HTML structure:

<div class="service-wrap">
        <tab>This is a tab switch</tab>
        <div class="list-container">
            <!--For loop has many items-->
            <item></item>
            <item></item>
        </div>
    </div>

Solution:

1. When using the tab of the component library, put a div on the outer layer to prevent click penetration and abnormal event flow or (a temporary solution, depending on the business scenario)

2. The style of the component library cannot be changed. Sticky is used as the inline style of the tab component. Because I use this tab directly on the top of the viewpoint, this effect 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 everything works fine.

Some thoughts:

The compatibility of position:sticky with Android is simply heartbreaking. Currently, there are a lot of mobile phone users, and it is necessary to take both into account. Due to the poor support of the Android system for sticky positioning, if the business scenario can be solved with other positioning, then it is better not to use sticky. . . . Leaving sad tears. . . .

ps: If you have other solutions, please let me know, thank you.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.