Dính
Cố định container thành sticky hoặc cấu hình chỉ một khu vực theo sau trong cấu trúc khó dính sticky.
cố định container
như header, toolbar FlexLayoutContainer nếu nó cần phải được cố định stickyModecó thể sử dụng. Khi sử dụng, các kiểu inline liên quan đến sticky sẽ được áp dụng cho container đó và panel thay đổi kích thước.
Header trên trang web hiện tại được cấu hình theo cách này. Nếu container cần phải sticky, hãy áp dụng cách này.
Container là sticky đối với nội bộ
FlexLayoutStickyBoxkhông phải là thành phần làm cho container sticky, mà là áp dụng biến đổicho nội dung bên trong trong ranh giới của cha để trông giống như sticky. Do đó, trong một số trường hợp, nó có thể hoạt động khác với mong đợi. Hãy kiểm tra xem có phù hợp với trường hợp sử dụng hay không.
Thanh bên bên trái của trang này sử dụng FlexLayoutStickyBox. Thanh bên ngắn hơn nội dung chính và nằm trong cùng một FlexLayout cấu trúc với các container anh em. Trong cấu trúc này, CSS sticky thông thường khó bám vào vị trí mong đợi.
Trong trường hợp này, thay vì thay đổi toàn bộ cấu trúc HTML để điều chỉnh sticky, chỉ cần bọc khu vực cần theo dõi bên trong thanh bên. FlexLayoutStickyBox.
Sử dụng cái gì
FlexLayoutContainer stickyMode
header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.
FlexLayoutStickyBox
sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.
Kiểm soát kiểu trực tiếp
Nếu các tùy chọn sticky có sẵn không đủ, useDecompositionLayoutbạn có thể lấy container và áp dụng kiểu trực tiếp.
Tuy nhiên, nếu chỉ sửa đổi container, có thể vị trí của bảng điều chỉnh kích thước sẽ không khớp. Nếu bạn muốn bảng điều chỉnh kích thước di chuyển theo cùng một tiêu chuẩn, bạn cũng cần điều chỉnh các phần tử liên quan.
Tùy chọn FlexLayoutStickyBox
edge
auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.
offset
화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.
scrollRoot
관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.
onTranslateChange
translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.