Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to Create an On Scroll Fixed Navigation Bar with CSS?

CSS Web Development Front End Technology

A fixed navigation bar stays at the top of the page when users scroll down. This is achieved using CSS position: fixed property combined with JavaScript to detect scroll events and apply the sticky behavior dynamically.

Syntax

selector {
    position: fixed;
    top: 0;
    width: 100%;
}

Method 1: JavaScript−Based Sticky Navigation

This method uses JavaScript to detect when the user scrolls and applies the sticky class dynamically ?

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }
    
    #navigation-bar {
        overflow: hidden;
        background-color: #f0f0f0;
        padding: 10px 0;
        border-bottom: 2px solid #ddd;
    }
    
    #navigation-bar a {
        float: left;
        display: block;
        color: #333;
        text-decoration: none;
        padding: 15px 20px;
        margin: 0 5px;
        border-radius: 5px;
        transition: background-color 0.3s;
    }
    
    #navigation-bar a:hover {
        background-color: #007bff;
        color: white;
    }
    
    .content {
        padding: 20px;
        background-color: #f9f9f9;
        min-height: 300px;
    }
    
    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #007bff;
        z-index: 1000;
    }
    
    .sticky a {
        color: white;
    }
    
    .sticky + .content {
        padding-top: 80px;
    }
</style>
</head>
<body>
    <div class="content">
        <h1>Scroll down to see the sticky navigation</h1>
        <p>This is some initial content before the navigation bar.</p>
    </div>
    
    <div id="navigation-bar">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </div>
    
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus ante quis odio rhoncus, sit amet porta nunc venenatis. Vivamus eu ex et risus vehicula semper eu eu elit. Aliquam tempor rutrum neque sit amet aliquam.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non eros ex. Suspendisse placerat tincidunt tortor a semper. Etiam molestie justo ac sapien auctor maximus.</p>
        <p>Continue scrolling to see more content and test the fixed navigation behavior.</p>
        <p>More content here to enable scrolling. The navigation bar should stick to the top when you scroll past it.</p>
    </div>
    
    <script>
        let nav = document.getElementById("navigation-bar");
        let sticky = nav.offsetTop;
        
        window.onscroll = function() {
            if (window.pageYOffset >= sticky) {
                nav.classList.add("sticky");
            } else {
                nav.classList.remove("sticky");
            }
        };
    </script>
</body>
</html>

A navigation bar that starts in its normal position and becomes fixed at the top when you scroll past it. The navigation changes color to blue when sticky, and the content adjusts with proper padding.

Method 2: Pure CSS Sticky Navigation

Modern browsers support position: sticky which provides the same effect without JavaScript ?

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }
    
    .navbar {
        position: sticky;
        top: 0;
        background-color: #333;
        padding: 15px 0;
        z-index: 100;
    }
    
    .navbar a {
        color: white;
        text-decoration: none;
        padding: 15px 20px;
        display: inline-block;
        transition: background-color 0.3s;
    }
    
    .navbar a:hover {
        background-color: #555;
    }
    
    .content {
        padding: 40px 20px;
        line-height: 1.6;
    }
    
    .section {
        min-height: 400px;
        margin-bottom: 20px;
    }
</style>
</head>
<body>
    <div class="content">
        <h1>Header Content</h1>
        <p>This content appears before the sticky navigation. Scroll down to see the navigation stick to the top.</p>
    </div>
    
    <nav class="navbar">
        <a href="#">Home</a>
        <a href="#">Products</a>
        <a href="#">Services</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    
    <div class="content">
        <div class="section">
            <h2>Section 1</h2>
            <p>Content for section 1. The navigation bar above will stick to the top as you scroll through this content.</p>
        </div>
        
        <div class="section">
            <h2>Section 2</h2>
            <p>More content to demonstrate the sticky navigation behavior. Keep scrolling to see it in action.</p>
        </div>
    </div>
</body>
</html>

A dark navigation bar that automatically sticks to the top when scrolled past, without requiring any JavaScript. The navigation remains fixed while scrolling through the content sections.

Key Properties

Property Value Purpose
position fixed or sticky Makes the element stick to viewport
top 0 Positions element at top of viewport
z-index High value (e.g., 100) Ensures navigation appears above content
width 100% Makes navigation span full width

Conclusion

CSS position: sticky provides the easiest solution for modern browsers, while the JavaScript approach offers more control and broader browser support. Both methods create effective fixed navigation bars that enhance user experience.

Updated on: 2026-03-15T15:33:07+05:30

5K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements