How to Create a CSS Sticky Header That Smoothly Transitions on Scroll

Creating a good-looking and useful website is an important skill for any web developer. One cool feature you can add is a sticky header that stays at the top of the page even when you scroll.

This guide will show you how to create this effect using CSS, in simple words that any student can understand. Let’s get started!

A CSS sticky header that smoothly transitions on the scroll is a great feature for any website. It keeps the header at the top of the page so you can always see the important navigation links.

In this article, we’ll learn how to create this effect using CSS.

Step-by-Step Guide

1. Setting Up the HTML Structure

First, we need a basic HTML structure. Here’s an example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>News Blog</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Politics</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Health</a></li>
                <li><a href="#">Entertainment</a></li>
                <li><a href="#">Sports</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="category" id="politics">
            <h2>Politics</h2>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Politics+1" alt="Politics Post 1">
                <div class="card-content">
                    <h3>Post Title 1</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Politics+2" alt="Politics Post 2">
                <div class="card-content">
                    <h3>Post Title 2</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <!-- Add more posts as needed -->
        </section>

        <section class="category" id="technology">
            <h2>Technology</h2>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Technology+1" alt="Technology Post 1">
                <div class="card-content">
                    <h3>Post Title 1</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Technology+2" alt="Technology Post 2">
                <div class="card-content">
                    <h3>Post Title 2</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <!-- Add more posts as needed -->
        </section>

        <section class="category" id="health">
            <h2>Health</h2>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Health+1" alt="Health Post 1">
                <div class="card-content">
                    <h3>Post Title 1</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Health+2" alt="Health Post 2">
                <div class="card-content">
                    <h3>Post Title 2</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <!-- Add more posts as needed -->
        </section>

        <section class="category" id="entertainment">
            <h2>Entertainment</h2>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Entertainment+1" alt="Entertainment Post 1">
                <div class="card-content">
                    <h3>Post Title 1</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Entertainment+2" alt="Entertainment Post 2">
                <div class="card-content">
                    <h3>Post Title 2</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <!-- Add more posts as needed -->
        </section>

        <section class="category" id="sports">
            <h2>Sports</h2>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Sports+1" alt="Sports Post 1">
                <div class="card-content">
                    <h3>Post Title 1</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <div class="card">
                <img src="https://via.placeholder.com/150x100.png?text=Sports+2" alt="Sports Post 2">
                <div class="card-content">
                    <h3>Post Title 2</h3>
                    <p>Post content...</p>
                </div>
            </div>
            <!-- Add more posts as needed -->
        </section>
    </main>

    <script src="script.js"></script>
    
</body>
</html>

2. Adding Basic CSS

Next, we need to add some basic CSS to style our header. Create a styles.css file and add the following styles:

CSS

/* start header */

.header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    width: 100%;
    top: 0;
    left: 0;
}

.header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.header nav ul li {
    margin: 0 15px;
}

.header nav ul li a {
    color: #fff;
    text-decoration: none;
}

/* end header */

/* body  */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

main {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
}

.category {
    margin-bottom: 2rem;
}

.category h2 {
    background-color: #333;
    color: #fff;
    padding: 0.5rem;
}

.card {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 150px;
    height: auto;
    object-fit: cover;
}

.card-content {
    padding: 1rem;
    flex: 1;
}

.card-content h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: #333;
}

.card-content p {
    line-height: 1.5;
    color: #555;
}

.card-content a {
    display: inline-block;
    margin-top: 0.5rem;
    color: #007BFF;
    text-decoration: none;
}

.card-content a:hover {
    text-decoration: underline;
}

/* end body */

3. Making the Header Sticky

To make the header sticky, we’ll use the position: sticky property in CSS. Add the following code to your styles.css file:

CSS

.header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000; /* Keeps the header on top of other elements */
}

4. Adding Smooth Transition on Scroll

To add a smooth transition effect, we’ll use CSS transitions. Update your styles.css file with the following styles:

CSS

.header {
    transition: background-color 0.3s ease-in-out, padding 0.3s ease-in-out;
}

body.scrolled .header {
    background-color: #222;
    padding: 5px 0;
}

5. JavaScript for Scroll Detection

We’ll use a small JavaScript snippet to add a class to the body when the user scrolls. Create a script.js file and add the following code:

JavaScript

window.addEventListener('scroll', function() {
    if (window.scrollY > 50) {
        document.body.classList.add('scrolled');
    } else {
        document.body.classList.remove('scrolled');
    }
});

6. Linking JavaScript in HTML

Don’t forget to link your script.js file in the HTML. Add the following line before the closing </body> tag:

HTML

<script src="script.js"></script>

Summary in Tables

Here’s a summary of the main steps in a table format:

Step	Description	Code Example
1	Setting up HTML structure	Basic HTML structure with header and main content
2	Adding basic CSS	Styling the header and navigation links
3	Making the header sticky	`position: sticky` and `z-index` properties
4	Adding smooth transition	CSS transitions for background color and padding
5	JavaScript for scroll detection	Adding class on scroll with JavaScript
6	Linking JavaScript	Linking `script.js` in HTML

Video Tutorial

Creating a CSS sticky header that smoothly transitions on the scroll is a valuable skill for any web developer. Following the steps outlined in this article can make your website look more professional and user-friendly.

With a sticky header, your website will always show the navigation links at the top, making it easier for visitors to navigate. This approach helps keep important links accessible and adds a modern touch to your web design.

Following these simple steps, you can create a sticky header that smoothly transitions on the scroll.