Sticky Viewport
Responsive sticky sections for Framer.
A live, viewport-height-aware offset for Framer’s native sticky positioning — adapts automatically across every screen, no code required.
Dynamic viewport-height scaling
Manual Base / XL / XXL tiers
Top and Bottom sticky positioning
Live Diagnostics for calibration
Overview
Framer’s native sticky positioning uses a single fixed offset. It may look right on the screen you designed for, but rarely stays right across different viewport heights. Sticky Viewport extends that native behavior with a live, viewport-height-aware offset that automatically adapts to every screen, scaling continuously or switching between fixed tiers, all while keeping Framer’s native sticky workflow.
Simply target any Frame or Stack with its native Position set to Sticky, then choose Stick To (Top or Bottom) inside Sticky Viewport. The native Framer anchor only needs to enable sticky behavior; it doesn’t need to match the component’s Stick To setting. Verify everything with the built-in Diagnostics overlay, which appears live in Preview and on published pages. No code required.
How to Set Up (Dynamic Mode)
Using Manual Mode? Follow steps 1–6, then set fixed Base/XL/XXL tiers instead of calibrating Base Offset and Scale Factor.
1
Select the layer you want to make sticky (a Frame or Stack) and set its Position Type to Sticky in the right panel.
Set the layer’s Position to Sticky and enable only one native sticky anchor (Top or Bottom). Sticky Viewport automatically overrides the native anchor, so it does not need to match the component’s Stick To setting. Make sure the parent Frame or Stack is taller than the target layer, standard Framer sticky behavior.
2
Give that layer a unique name in the Layers panel — for example, Sticky Frame.
3
Paste Sticky Viewport anywhere on the page. It remains invisible and never affects layout. Keeping it as a top-level layer simply makes it easier to find later.
4
Enter the layer’s exact name in Target Layer, then choose Stick To (Top or Bottom). This setting determines the sticky anchor regardless of the native Framer anchor selected on the layer.
The name must match exactly, including capitalization.
5
Open Preview. The Diagnostics appears automatically and confirms that everything is working: Target Status Found, Placement OK, and the applied offset under Final Position.
The canvas never applies the effect. Always check in Preview or on a published page.
6
In Preview or on the published page, scroll until the target layer becomes sticky — the Diagnostics Panel confirms Sticky State: Active.
7
Calibrate the anchor: set Base Viewport to match the live Viewport Height shown in Diagnostics (in Preview or preferably on a real device browser at your target breakpoint), then set Base Offset to the sticky gap you want at that height: the same value you’d normally use for the layer’s native sticky offset.
Preview’s reported Viewport Height is less than the real published page at the same window size, so check the published page’s Viewport Height value on Diagnostics too before finishing calibration.
8
Fine-tune and publish: adjust Scale Factor if needed while checking different viewport heights, watching Final Position update in Preview. When calibration is complete, turn Diagnostics off before publishing.
Keep Min Offset at or below Base Offset, and Max Offset at or above it, or the calibration point itself gets clamped. Sticky Viewport handles modern mobile viewport changes automatically, but it’s still good practice to verify on a real device.
Annotated setup: name the target layer, then enter it into Target Layer.
Features
Dynamic
Automatically scales the sticky offset with viewport height for consistent spacing across devices, with configurable Min/Max safety bounds. Ready to use with the included defaults.
Manual
Define up to three fixed viewport-height tiers (Base / XL / XXL) with independent offsets in px or vh for complete manual control.
Property panel: Dynamic Mode vs. Manual Mode controls.
Top or Bottom Positioning
Supports both native sticky modes. Bottom mode automatically compensates for the target layer’s height, so the value you set is the visible gap you actually get.
Live Diagnostics
Instantly verify setup with target status, sticky state, viewport height, and the final applied position in Preview and on published pages. Includes Solid and Glass themes for comfortable viewing on both dark and light designs.
Optional Console Logging
Structured diagnostic events for advanced troubleshooting and development, disabled by default.
Responsive Recalculation
Automatically updates during window resizing and modern mobile viewport changes to keep sticky positioning accurate.
Safe by Design
Each instance controls a single target layer, and disabling the component cleanly restores the layer’s original native sticky settings.
Independent Sticky Anchor
Sticky Viewport automatically manages the sticky anchor, so Framer’s native Top or Bottom anchor only needs to enable sticky behavior and doesn’t have to match the component’s Stick To setting.
Live Diagnostics: target status, sticky state, and final position, verified on a published page.
Notes
Sticky behavior depends on parent height, overflow, and the scroll container.
For precise mobile calibration, test on the target device size.
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 custom work? Email support.motiondevlab@proton.me
About
Contact