component
Sticky Viewport
By MotionDevLab

Details
- MotionDevLabAuthor
- componentType
- $12.00Price
- 2026-08-07Published
- 2026-08-10Updated
- 2026-08-07Added
- InteractiveCategories
Summary
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…
Description
Overview 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. How to Set Up 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. Full step-by-step guide with tips and video: Sticky Viewport Tutorial Features 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? Email: support.motiondevlab@proton.me
Introduction
Responsive Sticky Positioning
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1266