---
title: Sticky Content Widget
description: "## Overview The **Sticky Content** widget creates a modern two-column layout where the left section stays fixed (sticky) while the right section scrolls through a grid of feature cards. This is a popular design pattern used on SaaS landing pages, product showcases, and feature highlight sections. The sticky behavior is powered by a custom JavaScript engine with hardware-accelerated animations, smooth scroll tracking, and automatic mobile fallback. --- ##…"
url: "https://pistonui.com/docs/sticky-content-widget/"
updated: "2026-02-07"
category: Widgets
---

# Sticky Content Widget

## Overview

The **Sticky Content** widget creates a modern two-column layout where the left section stays fixed (sticky) while the right section scrolls through a grid of feature cards. This is a popular design pattern used on SaaS landing pages, product showcases, and feature highlight sections.

The sticky behavior is powered by a custom JavaScript engine with hardware-accelerated animations, smooth scroll tracking, and automatic mobile fallback.

---

## Getting Started

1. Open any page in **Elementor Editor**
2. Search for **"Sticky Content"** in the widget panel (under the PistonUI category)
3. Drag the widget onto your page
4. Edit the **Left Content** (title, description, button)
5. Add your **Cards** in the Cards section
6. Adjust layout widths and styling as needed
7. Save and preview

---

## Content Tab

### Left Content

The sticky side of the layout. This section remains fixed as the user scrolls past the cards.

| Setting | Description | Default |
| --- | --- | --- |
| **Title** | Main heading text. Supports dynamic content. | "PistonUI: Built for Speed..." |
| **Title HTML Tag** | Semantic heading tag (H1–H6) | H2 |
| **Description** | Rich text editor (WYSIWYG) for detailed content. Supports dynamic content. | — |
| **Show Button** | Toggle the CTA button on/off | On |
| **Button Text** | Label displayed on the button | "Explore Features" |
| **Button Link** | URL with target and nofollow options | # |
| **Button Icon** | Optional icon from the Elementor icon library | — |
| **Icon Position** | Place the icon before or after the button text | After |

### Cards

The scrollable side of the layout. Cards are displayed in a responsive grid.

Each card has:

| Field | Description |
| --- | --- |
| **Icon** | Choose from Font Awesome, Elementor icons, or custom SVGs |
| **Title** | Card heading text |
| **Description** | Card body text |

**Cards Columns** — Number of columns in the card grid (1–3). Responsive controls for desktop, tablet, and mobile. Default: 2 columns on desktop/tablet, 1 on mobile.

### Layout

Fine-tune the split layout proportions and sticky behavior.

| Setting | Description | Default |
| --- | --- | --- |
| **Left Content Width** | Width of the sticky section (20–70%) | 40% |
| **Right Content Width** | Width of the scrollable cards section (30–80%) | 60% |
| **Gap Between Sections** | Horizontal space between left and right (20–120px) | 60px |
| **Sticky Offset Top** | Distance from the top of the viewport when sticky (0–200px) | 40px |

> **Tip:** Left + Right widths should total approximately 100% minus the gap for best results. All layout controls are fully responsive — set different values for desktop, tablet, and mobile.

---

## Style Tab

### Left Content Style

| Setting | Description |
| --- | --- |
| **Title Color** | Color of the sticky section heading |
| **Title Typography** | Full typography controls (font family, size, weight, line height, etc.) |
| **Description Color** | Color of the description text |
| **Description Typography** | Full typography controls for description |

### Button Style

*(Visible when Show Button is enabled)*

| Setting | Description |
| --- | --- |
| **Typography** | Font controls for button text |
| **Text Color** (Normal/Hover) | Button text color with separate hover state |
| **Background** (Normal/Hover) | Button background color with separate hover state |
| **Padding** | Inner spacing of the button |
| **Border** | Border style, width, and color |
| **Border Radius** | Corner rounding for the button |

### Cards Style

| Setting | Description |
| --- | --- |
| **Gap** | Space between cards in the grid |
| **Background** (Normal/Hover) | Card background color with hover state |
| **Box Shadow** (Normal/Hover) | Shadow effect with hover state |
| **Hover Border Color** | Border color change on hover |
| **Padding** | Inner spacing of each card |
| **Border** | Card border style, width, and color |
| **Border Radius** | Corner rounding for cards |

**Card Icon:**

| Setting | Description |
| --- | --- |
| **Color** (Normal/Hover) | Icon color with hover state |
| **Size** | Icon dimensions (10–100px) |

**Card Title:**

| Setting | Description |
| --- | --- |
| **Color** (Normal/Hover) | Title color with hover state |
| **Typography** | Full typography controls |

**Card Description:**

| Setting | Description |
| --- | --- |
| **Color** (Normal/Hover) | Description color with hover state |
| **Typography** | Full typography controls |

---

## How the Sticky Behavior Works

The widget uses a custom JavaScript engine (no external dependencies) with three scroll states:

1. **Before sticky zone** — Left content flows normally in the document
2. **Sticky zone** — Left content becomes `position: fixed` and stays at the top while cards scroll past
3. **After sticky zone** — Left content switches to `position: absolute` at the bottom of the wrapper, scrolling away naturally with the rest of the page

**Performance features:**

- `requestAnimationFrame` for smooth 60fps scroll handling
- Passive scroll listeners for zero scroll jank
- `ResizeObserver` for responsive width changes
- Hardware-accelerated transforms (`translate3d`)
- Subtle velocity-based trailing animation for a polished feel
- Respects `prefers-reduced-motion` accessibility setting

**Mobile behavior:** On screens ≤768px, the layout switches to a single column and sticky behavior is automatically disabled. The left content and cards stack vertically.

---

## Responsive Behavior

| Breakpoint | Layout | Cards Grid | Sticky |
| --- | --- | --- | --- |
| **Desktop** (≥1025px) | Side-by-side, 40/60 split | 2 columns | Active |
| **Tablet** (769–1024px) | Side-by-side, 42/58 split | 2 columns | Active |
| **Mobile** (≤768px) | Stacked vertically, 100% width | 1 column | Disabled |
| **Small Mobile** (≤480px) | Stacked, compact spacing | 1 column | Disabled |

All responsive values can be customized per breakpoint in Elementor's responsive controls.