スティッキー

コンテナをstickyに固定するか、stickyが付くのが難しい構造で特定の領域だけを追従させるように構成します。

コンテナを固定

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

tsx

<FlexLayoutContainer
  containerName="toolbar"
  isResizePanel
  stickyMode={{
    position: "top",
    offsetPx: 64,
    stickyResizePanel: true,
  }}
>
  <Toolbar />
</FlexLayoutContainer>

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

コンテナは内部に対するsticky

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

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

tsx

<FlexLayout>
  <FlexLayoutContainer containerName="sidebar">
    <Sidebar />
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="content">
    <Content />
  </FlexLayoutContainer>
</FlexLayout>

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

tsx

<FlexLayoutContainer containerName="sidebar">
  <FlexLayoutStickyBox edge="top" offset={88}>
    <SidebarNavigation />
  </FlexLayoutStickyBox>
</FlexLayoutContainer>

<FlexLayoutContainer containerName="content">
  <DocumentContent />
</FlexLayoutContainer>

使用するもの

FlexLayoutContainer stickyMode

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

FlexLayoutStickyBox

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

スタイルを直接制御

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

tsx

const { layout: containers, container } = useDecompositionLayout({
  layoutName: "root",
  containerName: "toolbar",
});

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

tsx

import { useLayoutEffect } from "react";
import { useDecompositionLayout } from "@byeolnaerim/flex-layout";

function CustomStickyToolbar() {
  const { container } = useDecompositionLayout({
    layoutName: "root",
    containerName: "toolbar",
  });

  useLayoutEffect(() => {
    if (!container) return;

    const previousPosition = container.style.position;
    const previousTop = container.style.top;
    const previousZIndex = container.style.zIndex;

    container.style.position = "sticky";
    container.style.top = "64px";
    container.style.zIndex = "20";

    return () => {
      container.style.position = previousPosition;
      container.style.top = previousTop;
      container.style.zIndex = previousZIndex;
    };
  }, [container]);

  return <Toolbar />;
}

FlexLayoutStickyBoxオプション

edge

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

offset

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

scrollRoot

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

onTranslateChange

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