HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>scroll-margin-top under sticky header</title>
  <style>
    .box {
      height: 160px;
      overflow: auto;
    }
    header {
      position: sticky;
      top: 0;
      height: 40px;
      background: #0f172a;
      color: #fff;
    }
    section {
      height: 160px;
      scroll-margin-top: 40px;
    }
  </style>
</head>
<body>
  <p><a href="#b">Go to B</a></p>
  <div class="box">
    <header>Menu</header>
    <section id="a">A</section>
    <section id="b">B</section>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS scroll-margin Property — Clear Sticky Header