How to Create a Sticky Header in Salesforce Lightning Web Components (LWC)

In plain words: A sticky header is a navigation bar or title block that stays locked to the top of the browser window when a user scrolls down a long page. In Salesforce Lightning Web Components (LWC), you don't need complex JavaScript window listeners to achieve this—modern CSS position: sticky handles it natively and smoothly.

When building custom applications in Salesforce, users often have to scroll through dense pages filled with records, forms, and data tables. Keeping action buttons or titles visible at all times greatly improves usability and navigation.

In this guide, we will build a reusable, dynamic sticky header component in Lightning Web Components (LWC) using clean HTML markup and CSS.

Step 1: Create the LWC Component

Open your terminal and use the Salesforce CLI to generate your component files:

sf lightning generate component -n stickyHeader -d force-app/main/default/lwc

Step 2: Build the HTML Template

Open stickyHeader.html. We will structure our component with an outer wrapper, a dedicated header container, and a content container.

<template>
    <div class="sticky-container">
        
        <!-- Sticky Header Section -->
        <div class="header-section">
            <h2>{headerContent}</h2>
        </div>

        <!-- Scrollable Content Section -->
        <div class="content-section">
            <p>{mainContent}</p>
        </div>

    </div>
</template>

Step 3: Add the Sticky CSS Styling

Open stickyHeader.css. This is where the magic happens. By applying position: sticky and top: 0 to the header class, the browser locks it in place as soon as the user scrolls past it.

.sticky-container {
    position: relative;
    max-height: 400px;
    overflow-y: auto; /* Enables scrolling within the container */
    border: 1px solid #dddbda;
    border-radius: 4px;
    background-color: #ffffff;
}

.header-section {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f3f2f2;
    padding: 16px;
    border-bottom: 1px solid #dddbda;
    font-weight: 700;
}

.content-section {
    padding: 16px;
    min-height: 800px; /* Makes the container long enough to scroll */
}

Developer Trap: The Overflow Trap
The most common reason position: sticky fails to work in LWC is that an ancestor element higher up in the DOM tree has overflow: hidden, overflow: scroll, or overflow: auto set without a defined height. Always ensure your sticky element's direct scrolling container has a controlled height or scroll context!

Step 4: Configure the JavaScript Controller

Open stickyHeader.js. We will use the @api decorator so parent components can pass custom header text and body content into our reusable component.

import { LightningElement, api } from 'lwc';

export default class StickyHeader extends LightningElement {
    @api headerContent = 'Default Sticky Header Title';
    @api mainContent = 'Scroll down to see the header stick to the top...';
}

Step-by-Step Usage in a Parent Component:

1. Create or open a parent LWC component.
2. Reference your child component in the HTML: <c-sticky-header header-content="Account Overview" main-content="Detailed records go here..."></c-sticky-header>.
3. Deploy your code to your Salesforce org and test the scrolling behavior inside a Lightning page.

360 Card: Essential CSS Rules for Sticky Elements

• position: sticky: The core property that switches an element from relative positioning to fixed positioning once it hits the scroll threshold.
• top: 0: Tells the browser exactly how many pixels from the top of the viewport to stick the element.
• z-index: Ensures the header floats above the scrolling content instead of sliding underneath it transparently.

Core Takeaway: Creating a sticky header in LWC requires zero JavaScript scroll event listeners—simply combine CSS position: sticky, a top offset, and a proper z-index.

Conclusion

Implementing a sticky header in Salesforce Lightning Web Components is a lightweight and robust way to improve navigation on data-heavy pages. By leveraging modern CSS instead of heavy JavaScript calculations, you ensure high performance across desktop and mobile Salesforce experiences.

Happy coding!