How To Create Sticky Navbar Example

<!DOCTYPE html>
<html>
<head>
<title>Sticky Navigation Bar Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
    line-height: 1.6;
  }
  .header {
    background: #f1f1f1;
    padding: 30px;
    text-align: center;
  }
  nav {
    overflow: hidden;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  nav a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  nav a:hover {
    background-color: #ddd;
    color: black;
  }
  .content {
    padding: 20px;
    height: 1500px; /* Force a scrollbar */
    background-image: linear-gradient(#fff, #ccc);
  }
</style>
</head>
<body>

<div class="header">
  <h1>My Website Header</h1>
  <p>Scroll down to see the sticky effect.</p>
</div>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div class="content">
  <h2>Main Content Area</h2>
  <p>The navigation bar above will stick to the top of the browser window once you scroll past the header.</p>
  <p>This is achieved using <code>position: sticky;</code> and <code>top: 0;</code> on the <code>nav</code> element.</p>
</div>

</body>
</html>