固定

將容器固定為sticky，或在不易粘附的結構中僅使特定區域跟隨。

像header、toolbar一樣 彈性佈局容器 如果本身需要固定 stickyMode可以使用。使用時，該容器和resize面板將應用sticky相關的內聯樣式。

tsx

目前本網站的頂部header是以此方式構建的。如果容器本身需要sticky，請應用此方法。

FlexLayoutStickyBox並不是將容器設為sticky的組件，而是在父邊界內對內部內容 轉換應用使其看起來像sticky。因此，在某些情況下可能會與預期不同。請確認是否適合使用案例。

本網站的左側邊欄使用了 FlexLayoutStickyBox。邊欄比正文短，並且與正文在同一個容器內作為兄弟容器排列。 FlexLayoutContainer 在這種結構中，普通的 CSS sticky 很難固定在預期的位置。

tsx

在這種情況下，與其改變整個 HTML 結構來調整 sticky，不如僅將需要跟隨的區域包裹在邊欄內。 FlexLayoutStickyBox這樣就可以了。

tsx

FlexLayoutContainer stickyMode

header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.

FlexLayoutStickyBox

sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.

如果提供的 sticky 選項不夠用， useDecompositionLayout可以通過容器來直接應用樣式。

tsx

不過，僅修改容器可能會導致調整面板和位置不一致。如果需要調整面板也要以相同的基準移動，則相關元素也必須一起調整。

tsx

edge

auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.

offset

화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.

scrollRoot

관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.

onTranslateChange

translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.