Fijo
fija el contenedor como sticky o configura solo ciertas áreas para seguir en estructuras donde es difícil que sea sticky.
fijar contenedor
como header, toolbar FlexLayoutContainer si debe estar fijo por sí mismo modoStickyse puede usar. Al usarlo, se aplican estilos en línea relacionados con sticky al contenedor y al panel de redimensionamiento.
El header superior de este sitio se configura de esta manera. Si el contenedor debe ser sticky, aplique este método.
sticky para el interior del contenedor
FlexLayoutStickyBoxno es un componente que hace que el contenedor sea sticky, sino que aplica transformara los contenidos internos dentro de los límites del padre para que parezca sticky. Por lo tanto, en algunos casos puede comportarse de manera diferente a lo esperado. Verifique si es adecuado para su caso de uso.
La barra lateral izquierda de este sitio utiliza FlexLayoutStickyBox. La barra lateral es más corta que el contenido principal y está FlexLayout dispuesta como un contenedor hermano dentro. En esta estructura, es difícil que el CSS sticky se adhiera a la posición esperada.
En este caso, en lugar de cambiar toda la estructura HTML para ajustar el sticky, solo hay que FlexLayoutStickyBoxenvolver el área que debe seguir dentro de la barra lateral.
Qué usar
FlexLayoutContainer stickyMode
header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.
FlexLayoutStickyBox
sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.
Control de estilo directo
Si las opciones sticky proporcionadas son insuficientes useDecompositionLayoutpuedes traer el contenedor y aplicar estilos directamente.
Sin embargo, si solo modificas el contenedor directamente, puede haber desajustes con el panel de redimensionamiento. Si necesitas que el panel de redimensionamiento se mueva con el mismo criterio, también debes ajustar los elementos relacionados.
Opciones de FlexLayoutStickyBox
edge
auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.
offset
화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.
scrollRoot
관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.
onTranslateChange
translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.