---
title: "Sticky Viewport — Framer component · Best of Framer"
description: "$12.00 · Framer component · by MotionDevLab · Interactive. Sticky Viewport adds a live, viewport-height-aware offset that adapts automatically, scaling continuously or switching between fixed…"
canonical: "https://framer.elliotli.dev/component/sticky-viewport"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Sticky Viewport

# Sticky Viewport

Responsive Sticky Positioning

[View on Framer](https://framer.com/marketplace/components/sticky-viewport/?via=elliot-li)

![Sticky Viewport preview image 1](https://framer.elliotli.dev/og/component/sticky-viewport/e8963dc96dd39540/1600x1200.jpg)

## 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

1.  Set the target layer's Position to **Sticky** and enable one native anchor (**Top** or **Bottom**).
    
2.  Give it a unique name, e.g. **Sticky Frame**, then paste **Sticky Viewport** anywhere on the page. It's invisible and never affects layout.
    
3.  Enter that name in **Target Layer**, then choose **Stick To**.
    
4.  Open **Preview**: **Diagnostics** confirms Target Status **Found** and shows the applied offset under **Final Position**.
    
5.  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**](https://motiondevlab.com/components/sticky-viewport/overview)

### 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](https://motiondevlab.com/)

**License:** Single-Use Commercial License, per Framer's [Community Terms](https://www.framer.com/legal/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](mailto:support.motiondevlab@proton.me)

## Rank history [How rankings work →](/terms#rankings)

-   All · #4522

## Details

- **Author**: MotionDevLab
- **Price**: $12.00
- **Published**: 2026-08-07
- **Updated**: 2026-08-10
- **Added**: 2026-08-07
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase