<html>

<body>

  <header>
  </header>

  <main>
    <div class="col-left">
      <div class="sticky-on">
      </div>
    </div>

    <div class="content">
      <p>INIT Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Libero id faucibus nisl tincidunt eget nullam non nisi est. Quis risus sed vulputate odio ut enim blandit volutpat. Urna molestie at elementum eu. Odio euismod lacinia at quis risus sed vulputate. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Sem viverra aliquet eget sit amet tellus. Laoreet suspendisse interdum consectetur libero id faucibus nisl. Quisque id diam vel quam. Ut etiam sit amet nisl. Sodales ut eu sem integer vitae justo. Nulla malesuada pellentesque elit eget gravida cum sociis. Amet tellus cras adipiscing enim eu turpis egestas pretium. Magna eget est lorem ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.
      </p>
    </div>
    <div class="col-right">

    </div>
  </main>
</body>

</html>
body {
  font-family: tahoma;
  padding: 0px;
  margin: 0px;
}

header {
  position: sticky;
  top: 0px;
  min-height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid lightgray;
  backdrop-filter: blur(4px);
}

.sticky-on {
  position: sticky;
  top: 210px;

  padding: 60px 20px 60px 20px;
  min-height: 150px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}

main {
  height: 160vh;
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
}
main > div.content {
  padding: 20px;
}

.col-left {
  padding-left: 20px;
  padding-top: 30vh;
}
.col-left > div {
  background-color: gray;
}
.col-right {
  padding-top: 50vh;
}
.col-right > div {
  background-color: blue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.