粘性
将容器固定为 sticky,或在 sticky 难以附着的结构中仅使特定区域跟随.
固定容器
像 header、toolbar 一样 FlexLayoutContainer 如果需要固定本身 stickyMode可以使用。使用时,该容器和调整面板将应用 sticky 相关的内联样式.
当前本网站的顶部 header 是通过这种方式构建的。如果容器本身需要 sticky,请应用此方法.
容器内部的 sticky
FlexLayoutStickyBox不是将容器变为 sticky 的组件,而是在父边界内对内部内容应用 变换使其看起来像 sticky。因此,在某些情况下,可能会与预期不同。请确认是否适合使用案例.
本网站的左侧边栏使用了FlexLayoutStickyBox。边栏比正文短,并且与正文在同一层级的兄弟容器中排列。 FlexLayoutContainer 在这种结构中,普通的CSS sticky很难粘附到预期的位置。
在这种情况下,不必改变整个HTML结构来调整sticky,而是只需将需要跟随的区域包裹在边栏内。 FlexLayoutStickyBox这样就可以了。
使用什么
FlexLayoutContainer stickyMode
header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.
FlexLayoutStickyBox
sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.
直接样式控制
如果提供的sticky选项不足, useDecompositionLayout可以获取容器并直接应用样式。
但是,仅直接修改容器可能会导致resize panel的位置不一致。如果resize panel也需要按照相同的标准移动,则相关元素也需要一起调整。
FlexLayoutStickyBox选项
edge
auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.
offset
화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.
scrollRoot
관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.
onTranslateChange
translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.