css position fixed sidebar

You can use the position: fixed; CSS property.

This keeps the sidebar in the same place on the screen even when the user scrolls down or up.

✅ Example Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    /* Fixed sidebar */
    .sidebar {
      position: fixed;       /* 👈 Keeps the sidebar fixed on scroll */
      top: 0;
      left: 0;
      width: 250px;
      height: 100%;          /* Full height */
      background-color: #333;
      color: white;
      padding: 20px;
    }

    /* Page content */
    .content {
      margin-left: 270px;    /* Add margin to avoid overlap with sidebar */
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="sidebar">
    <h2>Fixed Sidebar</h2>
    <p>This sidebar stays fixed while scrolling.</p>
  </div>

  <div class="content">
    <h1>Page Content</h1>
    <p>Scroll down to see the sidebar stay fixed.</p>
    <p style="margin-top: 1000px;">End of the page content.</p>
  </div>

</body>
</html>