Fixed vs Sticky Navigation Bar in CSS with Examples, HTML & CSS Guide

Fixed and Sticky nav bar

What is a Fixed Navigation Bar ?

A fixed navigation bar stays pinned at the top of the viewport, even when the user scrolls down the page. This provides constant access to menu links.

Use Case: Ideal for websites that require persistent navigation access, like portfolios or dashboards.

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: palevioletred;
      position: fixed;
      /* Fixed positioning */
      top: 0;
      width: 100%;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover:not(.active) {
      background-color: peru;
    }

    .active {
      background-color: plum;
    }
  </style>
</head>

<body>

  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>

  <!-- Main content -->
  <div style="padding:20px; margin-top:60px; background-color:palegreen; height:1500px;">
    <h1>Fixed Top Navigation Bar</h1>
    <p>Scroll down to see the navbar stay fixed at the top.</p>
  </div>

</body>

</html>

Output:

What is a Sticky Navigation Bar ?

A sticky navbar behaves like a regular element until it reaches a specified scroll position, then it "sticks" to the top of the screen. It is perfect for keeping the menu visible only after scrolling.

Use Case: Great for blogs or long content pages where you do not want the menu always visible from the start.

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    ul {
      list-style-type: none;
      position: sticky;
      /* Sticky positioning */
      top: 0;
      overflow: hidden;
      background-color: orange;
      padding: 0;
      margin: 0;
    }

    li {
      float: left;
      border-right: 1px solid white;
    }

    li a {
      display: block;
      padding: 10px 20px;
      text-decoration: none;
      color: white;
    }

    li a:hover {
      background-color: orangered;
    }

    div {
      padding: 10px;
      margin-top: 10px;
      height: 1000px;
      background-color: white;
    }
  </style>
</head>

<body>

  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>

  <div>
    <p>Scroll down to see the sticky navbar stick to the top after reaching its scroll position.</p>
  </div>

</body>

</html>

Output:

Differences Between Fixed and Sticky Navbar

Feature	Fixed Navbar	Sticky Navbar
Position	Always visible	Becomes visible after scroll
CSS Value Used	position: fixed	position: sticky
Use Case	Persistent menus, headers	Dynamic menus, blogs
Browser Support	Widely supported	Modern browsers only