Sticky Elements V2 API

Create sticky headers, sidebars, and navigation using the V2 JSON Layout API

Back to Component Examples

Important: Sticky in Scroll Containers

CSS position: sticky requires the sticky element to be a direct child of the scrolling container. When using the JSON Layout API, sticky elements work best for page-level stickiness (relative to the viewport).

For demos with scroll containers (like the examples below), the sticky elements are rendered directly as children of the scroll container using data attributes. The JSON API examples in the code cards show the equivalent configuration syntax.

Example 1: Sticky Header

Create a sticky header that stays fixed at the top while scrolling. Uses the header variant with shadow effect.

Sticky Header • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "sticky-header-demo",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "sticky",
            variant: "header",
            shadow: "default",
            label: "Main Navigation",
            html: `
                <div class="header">
                    <h4>My Application</h4>
                    <nav>
                        <a href="#">Home</a>
                        <a href="#">About</a>
                        <a href="#">Contact</a>
                    </nav>
                </div>
            `
        }
    }]
});

Example 2: Sticky Sidebar (Table of Contents)

Create a sticky sidebar navigation that stays visible while reading content. Uses the toc variant with offset.

Sticky Sidebar TOC • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "sticky-toc-demo",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "sticky",
            variant: "toc",
            offset: "sm",
            label: "Table of Contents",
            html: `
                <div class="toc-sidebar">
                    <h4>On This Page</h4>
                    <ul>
                        <li><a href="#">Introduction</a></li>
                        <li><a href="#">Getting Started</a></li>
                        <li><a href="#">Configuration</a></li>
                        <li><a href="#">Examples</a></li>
                        <li><a href="#">API Reference</a></li>
                    </ul>
                </div>
            `
        }
    }]
});

Example 3: Stacked Sticky Elements

Multiple sticky elements that stack together. Uses group and stack properties to control order.

Stacked Sticky Elements • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "stacked-sticky-demo",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "sticky",
                group: "header-stack",
                stack: 1,
                offset: "none",
                html: '<div class="announcement-bar">Free shipping on orders over $50!</div>'
            }
        },
        {
            content: {
                type: "sticky",
                group: "header-stack",
                stack: 2,
                variant: "header",
                shadow: "sm",
                html: '<div class="nav-bar"><h4>Online Store</h4></div>'
            }
        }
    ]
});

Example 4: Responsive Sticky

Sticky behavior only on larger screens. Uses breakpoint to enable sticky only at 1024px and wider.

Responsive Sticky • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "responsive-sticky-demo",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "sticky",
            variant: "header",
            breakpoint: "lg",  // Only sticky at 1024px+
            shadow: "default",
            html: `
                <div class="header">
                    <h4>Desktop Only Sticky</h4>
                    <span>Only sticky at 1024px+</span>
                </div>
            `
        }
    }]
});

Example 5: Visual Effects

Sticky element with frosted glass background, border, and scale effect when stuck.

Visual Effects • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "visual-effects-demo",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "sticky",
            variant: "header",
            bgStuck: true,    // Frosted glass background
            border: true,     // Bottom border when stuck
            scale: true,      // Scale down when stuck
            shadow: "lg",     // Large shadow
            html: `
                <div class="header">
                    <h4>Visual Effects Header</h4>
                    <span>Watch the effects when stuck</span>
                </div>
            `
        }
    }]
});

V2 API Reference

Content Type: sticky

Properties:

View Full Documentation →