Sticky
Fixiert den Container sticky oder konfiguriert nur bestimmte Bereiche, die in einer Struktur, in der sticky schwer zu erreichen ist, folgen.
Container fixieren
wie Header, Toolbar FlexLayoutContainer wenn es selbst fixiert sein soll stickyModekann verwendet werden. Bei Verwendung werden die entsprechenden Inline-Stile für den Container und das Resize-Panel angewendet.
Der obere Header dieser Seite ist auf diese Weise konfiguriert. Wenn der Container selbst sticky sein soll, wenden Sie diese Methode an.
Container für interne Sticky
FlexLayoutStickyBoxist keine Komponente, die den Container sticky macht, sondern wendet transformauf den internen Inhalt innerhalb der Elterngrenze an, um ihn wie sticky erscheinen zu lassen. Daher kann es in einigen Fällen anders als erwartet funktionieren. Überprüfen Sie, ob es für den geeigneten Anwendungsfall geeignet ist.
Die linke Sidebar dieser Seite verwendet FlexLayoutStickyBox. Die Sidebar ist kürzer als der Hauptinhalt und befindet sich innerhalb FlexLayout der Geschwistercontainer. In dieser Struktur ist es schwierig, dass das normale CSS-Sticky an der erwarteten Position haftet.
In solchen Fällen sollten Sie anstelle einer vollständigen Änderung der HTML-Struktur nur den Bereich, der in der Sidebar folgen soll, FlexLayoutStickyBoxeinrahmen.
Was zu verwenden ist
FlexLayoutContainer stickyMode
header, toolbar처럼 컨테이너 자체가 고정되어야 할 때 사용합니다. resize panel도 함께 고정해야 한다면 stickyResizePanel을 true로 설정합니다.
FlexLayoutStickyBox
sidebar처럼 구조상 컨테이너 자체를 sticky로 만들기 어려울 때, 내부의 특정 박스만 따라오게 만들고 싶을 때 사용합니다.
Direkte Stilkontrolle
Wenn die bereitgestellten Sticky-Optionen nicht ausreichen useDecompositionLayoutkönnen Sie den Container abrufen und direkt Stile anwenden.
Allerdings kann es zu einer Verschiebung des Resize-Panels und der Position kommen, wenn nur der Container direkt bearbeitet wird. Wenn das Resize-Panel nach denselben Kriterien bewegt werden soll, müssen auch die entsprechenden Elemente angepasst werden.
FlexLayoutStickyBox Optionen
edge
auto, top, bottom, left, right 중 하나입니다. auto는 스크롤 방향에 따라 top 또는 left로 판단합니다.
offset
화면 모서리와의 여백(px)입니다. sticky header가 있다면 header 높이만큼 더 잡아 겹치지 않게 합니다.
scrollRoot
관찰할 scroll root입니다. 생략하면 viewport/window 기준으로 동작합니다.
onTranslateChange
translate 값이 바뀔 때 호출됩니다. 이동 상태에 맞춰 shadow, border 같은 스타일을 동기화해야 할 때 사용합니다.