Sticky

컨테이너를 sticky로 고정하거나, sticky가 붙기 어려운 구조에서 특정 영역만 따라오게 구성합니다.

컨테이너를 고정

header, toolbar처럼 FlexLayoutContainer 자체가 고정되어야 한다면 stickyMode를 사용할 수 있습니다. 사용시 해당 컨테이너와 resize panel에 sticky 관련 인라인 스타일이 적용 적용됩니다.

tsx

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

현재 본 사이트의 상단 header는 이 방식으로 구성되어 있습니다. 컨테이너 자체가 sticky 되어야 한다면 이 방식을 적용하십시오.

컨테이너는 내부에 대한 sticky

FlexLayoutStickyBox는 컨테이너를 sticky로 만드는 컴포넌트가 아니며, 부모 경계 안에서 내부 content에 transform을 적용해 sticky처럼 보이게 만드는 것입니다. 따라서 어떤 경우에는 예상과 다르게 동작할 수도 있습니다. 적합한 사용사례에 맞는지 확인하십시오.

본 사이트의 왼쪽 sidebar가 FlexLayoutStickyBox를 사용합니다. sidebar는 본문보다 짧고, 본문과 같은 FlexLayout 안에서 형제 컨테이너로 배치되어 있습니다. 이 구조에서는 일반적인 CSS sticky가 기대한 위치에 붙기 어렵습니다.

tsx

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

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

이런 경우 sticky를 맞추려고 전체 HTML 구조를 바꾸기보다, sidebar 안에서 따라와야 하는 영역만 FlexLayoutStickyBox로 감싸면 됩니다.

tsx

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

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

What to use

FlexLayoutContainer stickyMode

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

FlexLayoutStickyBox

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

직접 스타일 제어

제공되는 sticky 옵션으로 부족하다면 useDecompositionLayout로 컨테이너를 가져와 직접 스타일을 적용할 수 있습니다.

tsx

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

단, container만 직접 수정하면 resize panel과 위치가 어긋날 수 있습니다. resize panel까지 같은 기준으로 움직여야 한다면 관련 element도 함께 맞춰야 합니다.

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 같은 스타일을 동기화해야 할 때 사용합니다.