Lengket
Mengunci kontainer agar tetap sticky, atau mengonfigurasi agar hanya area tertentu mengikuti dalam struktur yang sulit untuk sticky.
Mengunci kontainer
seperti header, toolbar FlexLayoutContainer jika itu sendiri harus tetap stickyModedapat digunakan. Saat digunakan, gaya inline terkait sticky diterapkan pada kontainer tersebut dan panel resize.
Header atas situs ini saat ini disusun dengan cara ini. Jika kontainer itu sendiri harus sticky, silakan terapkan metode ini.
Kontainer untuk sticky internal
FlexLayoutStickyBoxbukan komponen yang membuat kontainer menjadi sticky, tetapi menerapkan transformpada konten internal dalam batas orang tua agar terlihat seperti sticky. Oleh karena itu, dalam beberapa kasus, mungkin berfungsi berbeda dari yang diharapkan. Pastikan sesuai dengan kasus penggunaan yang tepat.
Sidebar di sebelah kiri situs ini menggunakan FlexLayoutStickyBox. Sidebar lebih pendek dari konten utama, dan FlexLayout ditempatkan sebagai kontainer saudara di dalamnya. Dalam struktur ini, sticky CSS biasa sulit untuk menempel pada posisi yang diharapkan.
Dalam kasus seperti ini, daripada mengubah seluruh struktur HTML untuk menyesuaikan sticky, cukup FlexLayoutStickyBoxmembungkus area yang harus mengikuti di dalam sidebar.
Apa yang digunakan
FlexLayoutContainer stickyMode
header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.
FlexLayoutStickyBox
sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.
Kontrol gaya langsung
Jika opsi sticky yang disediakan tidak cukup useDecompositionLayoutAnda dapat mengambil kontainer dan menerapkan gaya secara langsung.
Namun, jika hanya mengubah kontainer, panel resize dan posisinya bisa tidak selaras. Jika Anda ingin panel resize bergerak dengan acuan yang sama, elemen terkait juga harus disesuaikan.
Opsi FlexLayoutStickyBox
edge
auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.
offset
화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.
scrollRoot
관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.
onTranslateChange
translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.