This box uses var(--tracked-box-height) as its min-height.
Tracking with data-keeptrack-id (on :root)
Sets --alias-box-height on :root without a real id.
Resize me--alias-box-height: …
This box uses var(--alias-box-height) as its min-height.
Targets
Target parent (numeric: 2 levels up)
Sets --height on the grandparent .grandparent.
--height on grandparent: …
Resize me
Target parent (selector: .wrapper)
Uses closest('.wrapper') to find the target.
--height on .wrapper: …
Resize me
Target parent + id prefix
Sets --my-sidebar-width on .layout.
--my-sidebar-width on .layout: …
Resize me
Features
Multiple properties
Tracks height, width, padding-top, border-radius.
Resize me
--height: …
--width: …
--padding-top: …
--border-radius: …
Scrollbar dimensions
--scrollbar-width: …
--scrollbar-height: …
Poll mode (non-resize changes)
Tracks background-color — hover the box to see it update.
Hover me--background-color: …
API
Observe / Unobserve API
This element starts untracked. Use the buttons to control tracking.
Resize me
--dynamic-box-height: …
--dynamic-box-width: …
Dynamic attribute
Add/remove data-keeptrack dynamically.
Not tracked yet--attr-box-height: …
Destroy / Re-init
onChange log
Anchor link tests
Scroll-padding test
Click these links to jump to sections below. Each heading should be visible below the sticky header(s), not hidden behind them.
This header uses top: calc(var(--header-offset, 0px)) to verify calc/var resolution.
The sub-nav should have unstuck above this point (its container ended). The header remains sticky. Scroll-padding now only accounts for the header height.
Alpha
This is the Alpha section. The heading should be visible below the sticky elements when navigated to via #anchor-alpha.