スティッキー

ヘッダー、ツールバーのように FlexLayoutContainer 自体が固定される必要がある場合は stickyModeを使用できます。使用時には、該当コンテナとリサイズパネルにsticky関連のインラインスタイルが適用されます。

現在の本サイトの上部ヘッダーはこの方式で構成されています。コンテナ自体がstickyである必要がある場合はこの方式を適用してください。

FlexLayoutStickyBoxはコンテナをstickyにするコンポーネントではなく、親境界内で内部コンテンツに transformを適用してstickyのように見せるものです。したがって、場合によっては予想と異なる動作をすることがあります。適切な使用事例に合っているか確認してください。

このサイトの左サイドバーはFlexLayoutStickyBoxを使用しています。サイドバーは本文より短く、本文と同じ FlexLayout 中で兄弟コンテナとして配置されています。この構造では、一般的なCSSのstickyが期待した位置に付くのが難しいです。

このような場合、stickyを合わせるために全体のHTML構造を変更するのではなく、サイドバー内で追従させる領域だけ FlexLayoutStickyBoxで囲めば良いです。

提供されるstickyオプションが不足している場合は useDecompositionLayoutコンテナを取得して直接スタイルを適用できます。

ただし、コンテナだけを直接修正すると、リサイズパネルと位置がずれる可能性があります。リサイズパネルも同じ基準で動かす必要がある場合は、関連する要素も合わせる必要があります。