Comparison between the position attribute sticky and fixed

 

Fixed of position attribute

Fixed always uses the body as the object for positioning. It always locates elements based on the browser window and locates elements based on the left, right, top, and bottom attributes.

<! Doctype HTML> 
After running on vscode

The page can be rolled because the PX settings are large enough
After dragging the scroll bar, as shown in figure

We can find that the position of Layer 2 remains unchanged as the scroll bar slides down. This is the fixed attribute.
If the position: fixed;
Left: 50px;
Top: 50px; and set the height of Layer 1 to a greater value (to make the page scroll)
Remove, so that Layer 2 will not decline with the scroll bar, such:


Sticky
<! Doctype HTML> 
HTML comment out {
Position:-WebKit-sticky;
Position: sticky;
Top: 0px;
}
After running, the effect is as follows:

You can see that the effect is the same as that of fixed. As the scroll bar moves, the image also moves.
 
However
{
Position:-WebKit-sticky;
Position: sticky;
Top: 0px;
}
Then run the command. The effect is as follows:


It can be found that after the annotated HTML is run, the content section disappears in the viewport as the scroll bar moves down. The uncommented code "content 4" stays at the top of the view even when the scroll bar slides down to the end. This is the difference between fixed and sticky attributes.
Again, because top: 0px;
Let's change it to top: 100. After running it, for example:

As you can see, even if the scroll bar moves down to the bottom, the content section is PX different from the top of the view;
Sticky experiment summary:
Top: 0px; the property is similar to fixed.
When top: Px> 0, the property is added to relative.
Perfect split line ----------------------------------------------------------------------------------------------------------------
Position: sticky; effective rules:
1. You must specify one of the top, right, bottom, and left thresholds (for example, sticky uses top) to apply the sticky position.
2. Reach the set threshold.
For example, the sticky threshold is top: 0px;
Top: 0px; sticky indicates the property of fixed.
Sticky also adds the property of relative when top> 0px is used.
Another perfect split line ------------------------------------------------------------------------------------------
The difference between sticky and fixed is:
Sticky can have the rolling effect of fixed, while fixed does not have the sticky effect (it can disappear in the view without rolling ).
 
Comparison between the position attribute sticky and fixed