고정 헤더 또는 상단으로 스크롤하는 경우 CSS의 두 API의 두 가지 속성을 알아야 합니다.
위치: 끈적끈적함;
position: sticky;CSS의 위치 지정 방법입니다. 요소에 적용하면 요소는 스크롤 시 상위 컨테이너의 지정된 위치에 고정되며 스크롤이 특정 위치에 도달하거나 조건이 충족될 때까지 고정 해제되지 않습니다.
요소의 위치 속성은 으로 설정되어야 하며 sticky, 또한 top、right、bottom 或 left 中至少一个值지정 되어야 합니다 确定元素固定的位置. 스크롤 할 때 滚动到元素的固定位置.元素会固定在该位置不动，直到离开固定位置
이 위치 지정 방법은 페이지가 스크롤될 때 계속 표시되어야 하는 탐색 모음이나 사이드바와 같은 요소에 자주 사용됩니다. 더 유연하며 필요에 따라 요소의 고정 상태를 다른 위치에 설정할 수 있습니다.
오버플로-y: 표시;
overflow-y: visible;CSS에서 요소의 세로 방향으로 오버플로된 내용을 처리하기 위해 사용되는 방법입니다. 요소에 적용하면 如果元素的内容超出了容器的高度，将会显示溢出的内容，不会进行任何剪裁或滚动. 추신: 이 기능을 사용하면 상단 효과를 설정할 때 요소의 높이를 유지할 수 있으므로 position: sticky;top:0;컨테이너의 스크롤 높이를 올바르게 계산할 수 있다는 점이 매우 중요합니다.
아래 그림과 같이:
1. overflow: visible;설정하지 않은 효과:
2. overflow: visible;설정한 효과:
스크롤할 때 간격이 있는 것을 발견하면 일부 DOM 요소의 padding-bottom 또는 padding-top 값을 조정해야 하거나 상단 값을 조정할 수도 있습니다 position: sticky;top:0;.
아래 그림과 같이:
즉, 콘텐츠가 컨테이너 높이를 초과하더라도 스크롤 막대가 나타나지 않거나 오버플로가 잘립니다. 콘텐츠가 완전히 표시되어 컨테이너 레이아웃에 영향을 줄 수 있습니다.
----------------구분선------ ---------------
오버플로의 해당 속성 값은 다음과 같습니다.
overflow-y:hidden;: 오버플로 내용은 숨겨지고 표시되지 않습니다.
Overflow-y: 스크롤;: 콘텐츠가 컨테이너 높이를 초과하는 경우 스크롤 막대가 표시되고 사용자는 스크롤하여 초과된 콘텐츠를 볼 수 있습니다.
Overflow-y: auto;: 콘텐츠가 컨테이너 높이를 초과할 경우 필요에 따라 스크롤바 표시 여부를 설정하고, 콘텐츠가 컨테이너 높이를 초과하지 않으면 스크롤바를 표시하지 않습니다.
overflow:overlay; : 요소에overflow:overlay;를 적용할 때 콘텐츠가 컨테이너 크기를 초과하는 경우 스크롤 막대가 표시됩니다. 스크롤과 달리 스크롤 막대는 콘텐츠 위에 부동 방식으로 표시되며 컨테이너 공간을 차지하지 않습니다. 즉, 스크롤 막대가 나타나더라도 내용이 잘리지 않습니다. 동시에 콘텐츠가 컨테이너를 초과하지 않으면 스크롤바가 표시되지 않습니다.
참고: 이러한 속성은 주로 세로 방향의 콘텐츠 오버플로 처리에 사용됩니다. 가로 및 세로 방향 모두에서 오버플로 처리를 설정하려면 오버플로 속성을 사용할 수 있습니다.