Framer's native sticky positioning uses a single fixed offset that rarely holds up across different viewport heights. Sticky Viewport adds a live, viewport-height-aware offset that adapts automatically, scaling continuously or switching between fixed tiers, while keeping Framer's native sticky workflow. Target any Frame or Stack with Position set to Sticky, then choose Stick To (Top or Bottom). Verify instantly with the built-in Diagnostics overlay in Preview and on published pages. No code required.
Set the target layer's Position to Sticky and enable one native anchor (Top or Bottom).
Give it a unique name, e.g. Sticky Frame, then paste Sticky Viewport anywhere on the page. It's invisible and never affects layout.
Enter that name in Target Layer, then choose Stick To.
Open Preview: Diagnostics confirms Target Status Found and shows the applied offset under Final Position.
Calibrate Base Viewport and Base Offset to your breakpoint, fine-tune with Scale Factor if needed, then turn Diagnostics off before publishing.
Dynamic Mode: auto-scales the offset with viewport height, with Min/Max safety bounds.
Manual Mode: up to three fixed tiers (Base/XL/XXL) in px or vh.
Top or Bottom sticky, with automatic height compensation for Bottom.
Live Diagnostics: target status, sticky state, viewport height, and final position, live and on published pages.
Safe by design: disabling the component restores the layer's original native sticky settings.
Made by Motion Dev Lab
License: Single-Use Commercial License, per Framer's Community Terms, for use in one end product.
Refund Policy: Digital product, all sales final once delivered. Review the properties and live demo before purchasing.
Questions, or need something custom built?
Framer's native sticky positioning uses a single fixed offset that rarely holds up across different viewport heights. Sticky Viewport adds a live, viewport-height-aware offset that adapts automatically, scaling continuously or switching between fixed tiers, while keeping Framer's native sticky workflow. Target any Frame or Stack with Position set to Sticky, then choose Stick To (Top or Bottom). Verify instantly with the built-in Diagnostics overlay in Preview and on published pages. No code required.
Set the target layer's Position to Sticky and enable one native anchor (Top or Bottom).
Give it a unique name, e.g. Sticky Frame, then paste Sticky Viewport anywhere on the page. It's invisible and never affects layout.
Enter that name in Target Layer, then choose Stick To.
Open Preview: Diagnostics confirms Target Status Found and shows the applied offset under Final Position.
Calibrate Base Viewport and Base Offset to your breakpoint, fine-tune with Scale Factor if needed, then turn Diagnostics off before publishing.
Dynamic Mode: auto-scales the offset with viewport height, with Min/Max safety bounds.
Manual Mode: up to three fixed tiers (Base/XL/XXL) in px or vh.
Top or Bottom sticky, with automatic height compensation for Bottom.
Live Diagnostics: target status, sticky state, viewport height, and final position, live and on published pages.
Safe by design: disabling the component restores the layer's original native sticky settings.
Made by Motion Dev Lab
License: Single-Use Commercial License, per Framer's Community Terms, for use in one end product.
Refund Policy: Digital product, all sales final once delivered. Review the properties and live demo before purchasing.
Questions, or need something custom built?
