Detailed explanation of CSS sticky positioning position: sticky problem pit

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.

<<:  The grid is your layout plan for the page

>>:  Description of the hr tag in various browsers

Recommend

How to deploy Vue project under nginx

Today I will use the server nginx, and I also nee...

Detailed use cases of vue3 teleport

Official Website https://cli.vuejs.org/en/guide/ ...

Detailed explanation of Jquery datagrid query

Table of contents Add code to the Tree item; 1. S...

mysql5.7 installation and configuration tutorial under Centos7.3

This article shares the MySQL 5.7 installation an...

Detailed explanation of downloading, installing and using nginx server

download http://nginx.org/en/download.html Unzip ...

Detailed explanation of JavaScript Proxy object

Table of contents 1. What is Proxy? 2. How to use...

vue+rem custom carousel effect

The implementation of custom carousel chart using...

Detailed explanation of object literals in JS

Table of contents Preface 1. Set the prototype on...

Methods and steps for deploying multiple war packages in Tomcat

1 Background JDK1.8-u181 and Tomcat8.5.53 were in...

Understanding and solutions of 1px line in mobile development

Reasons why the 1px line becomes thicker When wor...

Detailed explanation of the principle and function of Vue list rendering key

Table of contents The principle and function of l...

How to enable Flash in Windows Server 2016

I recently deployed and tested VMware Horizon, an...

React Class component life cycle and execution order

1. Two ways to define react components 1. Functio...

The principle and application of ES6 deconstruction assignment

Table of contents Array destructuring assignment ...