Sticky Header - Position Sticky Demo

💡 What is position: sticky? It behaves like relative until you scroll past it, then it becomes fixed and sticks to the top. Try scrolling!

Section 1: Introduction

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.

Scroll down to see the sticky header in action. It stays at the top while you read the content!

Section 2: How Sticky Works

The position: sticky property toggles between relative and fixed depending on the scroll position.

When the user scrolls past the element, it "sticks" to the top (or bottom, or left, or right) based on the top, bottom, left, or right value you set.

/* Sticky header CSS */
.sticky-header {
    position: sticky;
    top: 0; /* Sticks to top when scrolled past */
    z-index: 100; /* Stays above other content */
}

Section 3: Sticky vs Fixed

📌 position: sticky

Starts as relative. Only becomes fixed when you scroll past it. Lives inside its parent container.

📌 position: fixed

Always stays in the same place relative to the viewport. Ignores parent containers.

Section 4: Why Use Sticky?

Sticky headers are perfect for:

Navigation bars that stay visible while scrolling
Table headers that stay visible while scrolling through large tables
Category headers in e-commerce product lists
Table of contents sidebars
Contact forms that stay visible

Section 5: More Content

Here is even more content to demonstrate scrolling. The sticky headers should stay at the top as you scroll through this section.

📚 Two-Column Layout with Sticky Sidebar

Main Content Area

This is the main content area. Scroll down and watch the sidebar stick!

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

Additional Content

More content to make the page scrollable. The sidebar on the right will stay visible as you scroll down.

Even More Content

Keep scrolling! The sticky sidebar follows you.

📊 Sticky Table Header

💡 Scroll horizontally inside this table — the header row stays visible at the top!

ID	Name	Email	Status	Last Login
1	John Doe	john@example.com	Active	2024-01-15
2	Jane Smith	jane@example.com	Active	2024-01-14
3	Bob Johnson	bob@example.com	Inactive	2024-01-10
4	Alice Brown	alice@example.com	Active	2024-01-12
5	Charlie Wilson	charlie@example.com	Pending	2024-01-08
6	Diana Prince	diana@example.com	Active	2024-01-13
7	Evan Davis	evan@example.com	Active	2024-01-11
8	Fiona Garcia	fiona@example.com	Inactive	2024-01-09

🔄 Fixed vs Sticky: Key Differences

position: fixed

Always stuck — from the moment the page loads
Removed from document flow
Positioned relative to viewport
Ignores parent containers
Example: Chat widget, back-to-top button

position: sticky

Starts normal, only sticks when scrolled past
Stays in document flow until threshold
Positioned relative to parent container
Respects parent boundaries
Example: Section headers, navigation bars, table headers

📚 Sticky Reference Card

/* Sticky Header */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Sticky Sidebar */
.sticky-sidebar {
    position: sticky;
    top: 20px; /* Sticks 20px from top */
}

/* Sticky Table Header (inside scrollable container) */
.table-container {
    max-height: 400px;
    overflow-y: auto;
}
th {
    position: sticky;
    top: 0;
    background: #1a1a2e;
}

/* 💡 Sticky needs a threshold (top, bottom, left, or right) */
/* 💡 Sticky only works within its parent container */
/* 💡 Parent cannot have overflow: hidden */

🧠 Quick Quiz

/* Question 1: What property makes an element stick when scrolling? */ /* Answer: position: sticky */ /* Question 2: What additional property is required for sticky to work? */ /* Answer: top: 0 (or bottom/left/right) */ /* Question 3: What is the difference between fixed and sticky? */ /* Answer: Fixed always stays; sticky starts normal and only sticks when scrolled past */ /* Question 4: Can a sticky element stick outside its parent? */ /* Answer: No. Sticky only works within its parent container */ /* Question 5: What z-index value should a sticky header have? */ /* Answer: Higher than content, e.g., z-index: 100 */

📌 Sticky Header Demo