CSS Interview Questions

28 Questions
HTML & CSS

HTML & CSS

Web DevelopmentFrontend

Question 23

How do you create a sticky header using CSS?

Answer:

Creating a sticky header using CSS is a common technique to keep the header visible at the top of the viewport as the user scrolls down the page. This can improve navigation and user experience, especially on long pages. You can achieve this with the position: sticky; property combined with the top property. Here's a step-by-step guide on how to create a sticky header:

Basic Structure

Let's start with a simple HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Header Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <h1>My Sticky Header</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home"><h2>Home</h2><p>Content...</p></section>
        <section id="about"><h2>About</h2><p>Content...</p></section>
        <section id="services"><h2>Services</h2><p>Content...</p></section>
        <section id="contact"><h2>Contact</h2><p>Content...</p></section>
    </main>
</body>
</html>

CSS for a Sticky Header

To make the header sticky, you need to apply the position: sticky; property to the header. You'll also specify the top property to define how far from the top of the viewport the header should stick.

/* styles.css */

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

.header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensures the header stays above other content */
}

.header h1 {
    margin: 0;
    font-size: 24px;
}

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

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

.header nav ul li a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
}

.header nav ul li a:hover {
    background-color: #575757;
    border-radius: 4px;
}

/* Styles for main content */
main {
    padding: 20px;
}

section {
    margin-bottom: 40px;
}

section h2 {
    font-size: 22px;
    margin-bottom: 10px;
}

Explanation

  1. position: sticky;:

    • The position: sticky; property makes the header stick to the top of the viewport when the user scrolls past it.
    • It combines features of both relative and fixed positioning, depending on the scroll position.

  2. top: 0;:

    • The top: 0; property ensures that the header sticks to the top of the viewport when the user scrolls down. You can adjust this value to make the header stick further down the page if desired.

  3. z-index: 1000;:

    • The z-index property is used to ensure that the sticky header stays above other content on the page. This is particularly important if you have overlapping content.

Result

With this setup, as you scroll down the page, the header will stick to the top of the viewport, remaining visible while the rest of the content scrolls underneath it.

Browser Support

  • The position: sticky; property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera.
  • It might not work in older versions of Internet Explorer, so you might need a fallback solution or consider using position: fixed; in such cases (though this would require more work to maintain the layout).

Conclusion

A sticky header is a useful feature for improving site navigation and enhancing user experience. By using position: sticky;, you can easily implement a sticky header that stays visible at the top of the viewport as users scroll down your webpage. The combination of top: 0; and z-index ensures that the header behaves as expected and remains accessible.

Recent job openings