HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>position: fixed and sticky</title>
  <style>
  * { box-sizing: border-box; }

    body {
      font-family: system-ui, sans-serif;
      margin: 0;
      background: #f8fafc;
    }

    .pos-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      gap: 16px;
      padding: 12px 20px;
      background: #0f172a;
      color: #fff;
      font-weight: 600;
      z-index: 10;
    }

    main {
      padding: 72px 20px 40px;
      max-width: 520px;
      margin: 0 auto;
    }

    .pos-section-title {
      position: sticky;
      top: 52px;
      background: #fde68a;
      padding: 10px 14px;
      border-radius: 8px;
      margin: 24px 0 12px;
      font-weight: 700;
      color: #78350f;
    }

    .pos-block {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      color: #334155;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <nav class="pos-nav">
    <span>CodeToFun</span>
    <span style="opacity:0.7;font-weight:400;">fixed navbar</span>
  </nav>
  <main>
    <h1>Fixed &amp; sticky demo</h1>
    <p>Scroll to see the yellow section titles stick below the navbar.</p>
    <h2 class="pos-section-title">Chapter 1</h2>
    <div class="pos-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</div>
    <div class="pos-block">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
    <h2 class="pos-section-title">Chapter 2</h2>
    <div class="pos-block">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</div>
    <div class="pos-block">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</div>
    <h2 class="pos-section-title">Chapter 3</h2>
    <div class="pos-block">Mollit anim id est laborum. Scroll more to watch headings stick in place.</div>
    <div class="pos-block">Sticky combines relative and fixed behavior based on scroll position.</div>
  </main>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Fixed navbar and sticky section heading
