How to Use Position: Sticky for Sidebars with Pure CSS and Bootstrap | DigitalOcean

PHOTO EMBED

Thu May 19 2022 12:33:29 GMT+0000 (UTC)

Saved by @ali_naqvi #markup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sticky Position Example</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      .placeholder-example {
        background: lavender;
        height: 100vh;
        padding: 1em;
      }

      .sticky-example {
        background: cornflowerblue;
        padding: 1em;
      }

      .sticky {
        position: sticky;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="sticky-example sticky">Sticky</div>
    <div class="placeholder-example">Placeholder</div>
  </body>
</html>
content_copyCOPY

https://www.digitalocean.com/community/tutorials/how-to-build-multiple-stacking-sticky-sidebars-with-pure-css-and-bootstrap-4