When it comes to fixed headers or scrolling to the top, we need to know the two properties of the two APIs of CSS:
position: sticky;
position: sticky;It is a positioning method in CSS. When applied to an element, the element will be fixed at the specified position of the parent container when scrolling, and will not be unfixed until the scroll reaches a specific position or the condition is met.
The position attribute of the element needs to be set to sticky, and also needs to be top、right、bottom 或 left 中至少一个值specified 确定元素固定的位置. When scrolling 滚动到元素的固定位置, 元素会固定在该位置不动，直到离开固定位置.
This positioning method is often used for elements such as navigation bars or sidebars that need to remain visible as the page scrolls. It is more flexible and can set the fixed state of elements at different positions as needed.
overflow-y: visible;
overflow-y: visible;It is a method used in CSS to handle overflow content in the vertical direction of an element. When applied to an element, 如果元素的内容超出了容器的高度，将会显示溢出的内容，不会进行任何剪裁或滚动. PS: It is very, very important to note that this feature allows us to retain the height of the element when setting the top effect, so that the position: sticky;top:0;scroll height in the container can be correctly calculated.
As shown below:
1. overflow: visible;Effect without setting:
2. overflow: visible;Effect with setting:
If you find that there is a gap when scrolling, you need to adjust the padding-bottom or padding-top value of some DOM elements, or you can also adjust the position: sticky;top:0;top value.
As shown below:
This means that even if the content exceeds the height of the container, no scrollbars will appear or the overflow will be clipped. The content will be fully displayed, possibly affecting the layout of the container.
-------------------------------Dividing line----------------- ---------------
The corresponding attribute values of overflow are:
overflow-y: hidden;: Overflow content will be hidden and not displayed.
overflow-y: scroll;: If the content exceeds the height of the container, a scroll bar will be displayed and the user can scroll to view the exceeded content.
overflow-y: auto;: When the content exceeds the height of the container, whether to display the scroll bar will be set as needed. If the content does not exceed the height of the container, the scroll bar will not be displayed.
overflow: overlay; : When applying overflow: overlay; to an element, a scroll bar will be displayed if the content exceeds the dimensions of the container. Unlike scroll, the scroll bar is displayed above the content in a floating manner and does not occupy the space of the container. This means that even if scrollbars appear, the content will not be clipped. At the same time, if the content does not exceed the container, the scrollbar will not be displayed.
Note: These properties are mainly for content overflow processing in the vertical direction. If you want to set overflow processing in both horizontal and vertical directions, you can use the overflow property.