I found something really good

Description: Position :sticky is a new attribute for CSS positioning. Static (not fixed) fixed (not fixed) It is mainly used to monitor scroll events; In simple terms, in the sliding process, when the distance between an element and its parent reaches the sticky sticky positioning requirement (for example, top: 100px); Position :sticky

Before talking about sticky positioning, let’s talk about other positioning of position.

Absolute: Generates an absolute position relative to the first parent element other than the static position. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.

Fixed: Generates a fixed position of the element relative to the browser window (old IE does not support this). The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.

Relative: Generates elements that are positioned relative to their normal position, not out of the document flow.

Static: Default, no positioning, element appears in normal document flow (ignoring top, bottom, left, right, or Z-index declarations). Inherit specifies that the value of the Position property should be inherited from the parent element.

  1. Use sticky:
#sticky-nav {
    position: sticky;
    top: 100px;
}
Copy the code

Copy the code and set position:sticky to one (top,bottom,right,left) at the same time

Conditions of use:

The parent element cannot have overflow:hidden or overflow: Auto attributes. The value must be one of top, bottom, left, or right. otherwise, the height of the parent cannot be lower than the height of the sticky element

Pits in the project:

Problem Description:

In a small program development project; The Tabs component uses sticky positioning, with TAB bar switching; At the bottom of the TAB bar is a large list of contents displayed in list-Container. There are click events (or touch events) to display content; Click tests on ios and PC browsers are fine; But on An Android phone ！！！！ Oh my God, click through!! In addition, I tried to remove the item click in the list-container, and found that the TAB switch click did not respond, and the event disappeared!! Set a breakpoint and view the direction of the event flow: first, capture the event –> target node TAB –> event bubble; This bubble popped into the container list item… The rough structure of the project:

HTML structure:

<div class="service-wrap"> < TAB > This is TAB toggle </ TAB > <div class="list-container"> <! - there are a lot of item for loop -- > < item > < item > < item > < item > < / div > < / div >Copy the code

Solutions:

When using component library tabs, wrap a div around them to prevent click penetration and abnormal event flow or (a palliation, depending on the business scenario). The style of component library cannot be changed, sticky is the inline style of TAB component, because WHEN I use this TAB, it is directly on the top of Viewpoint, which can be achieved by fixed. I set position: Fixed! Outside of the calling class. The import. The styling priority overrides the positioning styles in the component library, and that’s fine.

A little thought:

Position: Sticky is compatible with Android, which makes people want to cry. At present, there are so many mobile phone users, it is necessary to take into account both of them, because android system has poor support for sticky positioning; If the business scenario can be solved with other positioning, then do not use sticky… Tears of sorrow…