Sticky Elements Examples

Interactive demos showcasing sticky positioning features

Example 1: Sticky Header

A header that sticks to the top of its container when scrolling. Notice the shadow appears when stuck.

My App

Scroll down to see the header stick to the top of this container. The header will gain a subtle shadow effect when it becomes stuck, providing visual feedback to users.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint.

Sticky Header Code HTML
<header data-rsl-sticky
        data-sticky-variant="header"
        data-sticky-label="Main navigation">
    <h3>My App</h3>
    <nav>...</nav>
</header>

Example 2: Sticky Sidebar

A sidebar navigation that stays visible while scrolling through content. Great for documentation or long-form articles.

Getting Started

Welcome to the documentation. This guide will walk you through everything you need to know to get up and running.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Installation

Installation is quick and easy. Simply include the CSS and JavaScript files in your project.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Configuration

Customize the component to fit your needs using CSS custom properties or JavaScript options.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Components

Explore our library of 30+ accessible components designed to work together seamlessly.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Utilities

Utility classes provide low-level building blocks for custom designs without writing CSS.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Sticky Sidebar Code HTML
<aside data-rsl-sticky
       data-sticky-offset="sm"
       data-sticky-variant="sidebar">
    <h4>Navigation</h4>
    <ul>...</ul>
</aside>

Example 3: Stacked Sticky Headers

Multiple sticky elements that stack below each other. Useful for announcement bars + navigation combos.

Free shipping on orders over $50! Use code: FREESHIP

My Store

Both headers will stick, with the announcement bar on top and the main navigation below it. The system automatically calculates the stacking offset.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.

Sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Stacked Headers Code HTML
<!-- Announcement Bar -->
<div data-rsl-sticky
     data-sticky-group="nav"
     data-sticky-stack="1"
     data-sticky-offset="0">
    Free shipping on orders over $50!
</div>

<!-- Main Navigation -->
<nav data-rsl-sticky
     data-sticky-group="nav"
     data-sticky-stack="2">
    My Store
</nav>

Example 4: Table of Contents

A sticky table of contents that stays visible while reading long articles. Uses the TOC variant with max-height scrolling.

Introduction

This is the introduction to our comprehensive guide. We'll cover all the essential topics you need to know.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The Basics

Understanding the fundamentals is key to mastering any new skill or technology.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Advanced Techniques

Once you've mastered the basics, these advanced techniques will take your skills to the next level.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Best Practices

Follow these proven best practices to ensure your code is maintainable and scalable.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Troubleshooting

Common issues and how to resolve them quickly and effectively.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Conclusion

Wrapping up everything we've learned and looking at next steps.

Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

TOC Code HTML
<nav data-rsl-sticky
     data-sticky-variant="toc"
     data-sticky-offset="sm">
    <h4>On This Page</h4>
    <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#basics">The Basics</a></li>
        <!-- More links -->
    </ul>
</nav>

Example 5: Sticky Tab Bar

A tab navigation that sticks below the header. Uses the tabs variant which accounts for header clearance.

Settings

General Settings

Configure your general account settings and preferences here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Sticky Tabs Code HTML
<!-- Main Header -->
<header data-rsl-sticky
        data-sticky-variant="header"
        data-sticky-z="high">
    Settings
</header>

<!-- Tab Bar (sticks below header) -->
<nav data-rsl-sticky data-sticky-variant="tabs">
    <button class="active">General</button>
    <button>Security</button>
    <button>Notifications</button>
</nav>

Example 6: Show on Scroll Up

A header that hides when scrolling down and reappears when scrolling up. Great for maximizing content space on mobile.

Scroll up to see me! (Scroll down first to hide)

Instructions: First scroll down - the header will hide. Then scroll up - the header will reappear. This pattern is common in mobile apps.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error.

Sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.

Aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Show on Scroll Up Code HTML
<header data-rsl-sticky
        data-sticky-direction="up"
        data-sticky-variant="header">
    Scroll up to see me!
</header>

More Options

These examples showcase just a few of the available features. Check the API Reference for the complete list of data attributes and JavaScript methods, or try the Playground for hands-on experimentation.

FilterBus Integration

Sticky Elements can publish their stuck state to FilterBus for other components to react, and subscribe to filter keys to show/hide based on filter state. See the FilterBus Demo for live examples, or check the API Reference for implementation details.