Sticky
fix the container as sticky, or configure only specific areas to follow in structures where sticky is hard to apply.
fix the container
like header, toolbar FlexLayoutContainer if it needs to be fixed itself stickyModeyou can use. When used, inline styles related to sticky are applied to the container and resize panel.
The top header of the current site is configured this way. If the container itself needs to be sticky, please apply this method.
The container is sticky to the inside.
FlexLayoutStickyBoxis not a component that makes the container sticky, but applies to the internal content within the parent boundary to make it look sticky. transformTherefore, it may behave differently than expected in some cases. Please check if it fits the appropriate use case.
The left sidebar of this site uses FlexLayoutStickyBox. The sidebar is shorter than the main content and is placed as a sibling container within it. FlexLayout In this structure, the typical CSS sticky may not stick to the expected position.
In such cases, instead of changing the entire HTML structure to align the sticky, you can simply wrap the area that needs to follow inside the sidebar. FlexLayoutStickyBox.
What to use
FlexLayoutContainer stickyMode
header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.
FlexLayoutStickyBox
sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.
Direct style control
If the provided sticky options are insufficient, useDecompositionLayoutyou can bring in the container and apply styles directly.
However, if you only modify the container directly, the resize panel and its position may become misaligned. If you want the resize panel to move based on the same criteria, you need to adjust the related elements as well.
FlexLayoutStickyBox options
edge
auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.
offset
화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.
scrollRoot
관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.
onTranslateChange
translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.