It started on my Blog

I do not know when, what we once thought will be broken, if we do not persist in learning, then we will eventually be eliminated by the society. So I decided to write “in hindsight series” the record once I couldn’t keep up with the knowledge and the key points, not necessarily complex content, content content is not high, perhaps like other people have written a tutorial, but I hope you can get from my notes you think important things, in the complicated work in a real world of geeks, Hopefully, all of these things will be applied to work someday. – XGHeaven

Take a look at the table of contents and find something you’d like to be curious about. I’m not here to write a tutorial.

Position: sticky What the hell is this?

Recently, the company is using Regular to package a table component, which needs to implement the function of fixing the table header. This is an effect that almost all component libraries implement, so there are several ways to implement it:

  1. Since thead/tr’s position attribute is invalid, you need to create a separate div header. And then set the value of the headerposition: absoluteAnd at the same timetop: 0. In this mode, the user is required to specify the width of each column to ensure that the self-made table header corresponds to the native table below. If not specified, you can wait until dom rendering is complete before measuring the width. Ant Design, for example, uses this approach.
  2. Because the difficulty of the above scheme is that the consistency between the self-made table header and the width of the native table can not be well guaranteed, so the boss of our group proposed to use the native THEAD, monitor scroll events and settransformProperty causes the table header to be offset, thus realizing the fixHeader problem. This method solves the first problem, but requires manual listening for scroll events, which may cause performance problems in the case of fast scrolling. And not elegant enough. If there is one in the table at the backposition: relativeOverwrites the header of the table.

Either way, I didn’t feel perfect, so I wondered if there wasn’t a better way to do it than manually updating it. Then I looked at github’s way of fixing the table headers and it all clicked. Hence the extension of this article, position: sticky attribute.

If you have some questions about fixing table headers or fixed columns, you can check out kaola’s article “Let’s talk about fixing table columns”.

When you first see this familiar, the first sentence is “I CA”, what the hell is this attribute, and when position has this attribute. So I looked at MDN, and I understood that this property was the easiest way to implement a fixed top.

In fact, it is a combination of position:relative and position: fixed, which must be combined with the attributes of top/right/bottom/left to be effective. Set the minimum value in the corresponding direction. When greater than the minimum, it is as relative as part of the document flow, and the top/right/bottom/left attributes are invalidated. Otherwise, when less than the set value, it behaves like fixed, except that fixed does not reproduce to the window, but to the nearest scrollable block-level element.

If you’ve read other articles about sticky, most of them are used to describe it in the sense of sticky, which is clearly what it means. If you think it’s clear from other tutorials, you can skip this one, and if you don’t get it, you can check it out here.

Let’s look at how to use sticky correctly.

Use proper posture

The following code preview can be viewed using the latest Chrome or a browser that supports Position: sticky. Some websites do not support iframe, you can go to my Blog to check

  1. Position: sticky only relative to the first of the parent block rolling elements (scrolling mechanism, through the overflow is set to overflow/scroll/auto/overlay elements), rather than the parent block element.

    See the Pen Position sticky relative to the outermost scrollable parent by Bradley Xu (@xgheaven) on CodePen.

  2. Position: sticky is effective only when the corresponding direction (top/right/bottom/left) is set. It can overlap each other and set four directions at the same time.

  3. Even if position: sticky is set, it will only appear in the content area of the parent block element, and it cannot go beyond this area unless you set a negative value.

  4. Position: sticky does not trigger a BFC, simply because float elements are not evaluated when calculating height.

  5. When position: sticky is set, the internal positioning is relative to this element

    See the Pen Position sticky inside is absolutely positioned relative to this element by Bradley Xu (@xgheaven) on CodePen.

  6. Although position: sticky represents relative or fixed, it is also possible to set their hierarchy by z-index. When the element is overridden by its subsequent siblings, you can adjust the hierarchy by z-index.

    See the Pen position: sticky through z-index adjustment hierarchy by Bradley Xu (@xgheaven) on CodePen.

Once you understand these, it’s actually quite easy to use this property.

For example. – Address book head

No code no bb, go straight to the code.

Position sticky Address book Demo
@xgheaven
CodePen

Expand the thinking

How do I detect if it has been fixed?

The most common requirement is to display normally while the document is in flow, but add some shadows or change the height when it is fixed. In order to achieve this effect, the first reaction may be to manually listen for scroll events to determine the position, which is of course no problem, but the resulting real performance loss.

The best way is to use IntersectionObserver, which is an API that can monitor whether an element is displayed in a window. See Professor Ruan’s “How to Use IntersectionObserver API” for details. The basic idea is to add two sentinels at the head and end of a scroll, and then determine if the element is fixed by the timing of the sentinels’ appearance and disappearance.

Examples are shown here

Is it possible to fix table headers/columns?

Because thead/ tBody has no love for Position, it does not support the sticky attribute, so we will create a separate header.

Later, after a netizen reminds me, I went to study, and found that there is a way to do fixed table header and column.

First, Firefox already supports position for thead/ tBody, so you can do this by setting position to thead/ tBody. For Chrome, this can be done by setting the TH in thead. See the Demo.

See the Pen position sticky by Bradley Xu (@xgheaven) on CodePen

And then it seems to be gone. Thank you for watching Shuishui’s Hindsight Series.