Skip to content

component

Sticky Viewport

By MotionDevLab

Details

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.

1501100112668/148/228/309/79/15
  • All · #1266