Fixo
Fixa o contêiner como sticky ou configura apenas uma área específica para seguir em estruturas onde o sticky é difícil.
fixar o contêiner
como header, toolbar FlexLayoutContainer se deve ser fixo modoStickypode ser usado. Ao usar, estilos inline relacionados ao sticky são aplicados ao contêiner e ao painel de redimensionamento.
O cabeçalho superior deste site está configurado dessa forma. Se o contêiner deve ser sticky, aplique este método.
sticky para o interior do contêiner
FlexLayoutStickyBoxnão é um componente que torna o contêiner sticky, mas aplica transformarao conteúdo interno dentro da borda do pai para parecer sticky. Portanto, em alguns casos, pode funcionar de maneira diferente do esperado. Verifique se é adequado para o caso de uso.
A sidebar à esquerda deste site usa o FlexLayoutStickyBox. A sidebar é mais curta que o corpo e está posicionada como um contêiner irmão dentro do mesmo. FlexLayout Nesta estrutura, o CSS sticky padrão pode ter dificuldade em se fixar na posição esperada.
Nesses casos, em vez de alterar toda a estrutura HTML para ajustar o sticky, você pode simplesmente envolver a área que deve seguir dentro da sidebar. FlexLayoutStickyBoxIsso pode ser feito.
O que usar
FlexLayoutContainer stickyMode
header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.
FlexLayoutStickyBox
sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.
Controle de estilo direto
Se as opções sticky fornecidas não forem suficientes, useDecompositionLayoutvocê pode trazer o contêiner e aplicar estilos diretamente.
No entanto, se você modificar apenas o contêiner, o painel de redimensionamento pode ficar desalinhado. Se o painel de redimensionamento também precisar se mover com a mesma referência, os elementos relacionados devem ser ajustados juntos.
Opções do FlexLayoutStickyBox
edge
auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.
offset
화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.
scrollRoot
관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.
onTranslateChange
translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.