<header>
  <h1>Sticky Header & backdrop-filter</h1>
</header>

<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, rem ipsa.
  Id accusantium molestias quas eum natus porro reiciendis praesentium. Commodi
  iste ut praesentium. Sapiente autem cumque a totam praesentium, impedit
  deleniti suscipit! Debitis nam nostrum odit deleniti ad, placeat eos mollitia
</p>
<p>
  eligendi culpa dolorem exercitationem et nihil! Totam dolore officiis et
  cumque reiciendis blanditiis aliquid odit, optio at inventore tempore illo
  accusantium, pariatur molestias fugiat eum? Ipsam placeat facilis alias quidem
  error soluta quos accusantium dignissimos cumque ut fugiat iste ipsa minima,
  nemo earum aperiam! Debitis eius odio ullam iure cum at voluptates corporis
  reiciendis unde, dicta excepturi enim nemo impedit voluptatum tempore sunt
  similique commodi architecto rem, quasi natus? Nihil excepturi architecto quos
  alias esse dolorem ut in eligendi assumenda a tenetur quidem, velit magni
</p>
<p>
  eaque sed molestiae tempore nesciunt, quisquam repudiandae qui? Impedit nulla,
  quas neque repellendus eos aliquid voluptate mollitia accusantium quos illo
  iusto rerum natus, praesentium optio, delectus maxime. Ex quas vel cum magnam
  dicta ipsam. Soluta excepturi consequatur quisquam magnam pariatur odio,
  laborum commodi corrupti. Rerum nesciunt voluptate sint temporibus repudiandae
  nisi sunt eveniet cumque soluta provident sed, necessitatibus, doloremque
  deserunt nihil perferendis sequi? Sed eveniet, molestias laboriosam dolores
  voluptatibus illum quos non id explicabo. Autem quis dolore sed impedit cumque
  sapiente quisquam optio vero magnam aliquid modi quibusdam praesentium
</p>
<p>
  perferendis mollitia voluptatum obcaecati at animi velit consequatur vitae
  dignissimos laboriosam, ut ratione quos. Eum autem dicta quas accusamus
  placeat. Ab vitae architecto provident saepe eveniet autem voluptatum
  consectetur, velit minus eligendi modi quo repellat possimus nemo expedita
  enim. Rerum quidem quaerat commodi aut nobis ipsa cupiditate illo aspernatur
  error pariatur possimus natus nam, reprehenderit laboriosam voluptatum quia?
  Pariatur consequuntur nemo soluta, ab nobis animi nostrum veritatis ipsum
  maxime tempore quaerat cumque, totam mollitia? Magnam minus, repudiandae quis
  in incidunt deleniti provident eveniet quisquam.
</p>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "futura", sans-serif;
  color: white;
  min-height: 300vh;
  background: url("https://picsum.photos/1200/800/?image=115");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

header {
  width: 100%;
  margin: 0 auto;
  position: sticky; // relative
  top: 0;
  z-index: 2;
  border: solid 4px rgba(#000, 0.25);
  font-weight: 200;
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: #223344aa;
    backdrop-filter: blur(1.25px);
  }
  > h1 {
    padding: 20px 24px;
    color: #fff;
    text-shadow: 0 1px 1px #000;
    font-weight: 200;
  }
}

p,
section {
  padding: 24px 32px;
  text-shadow: 0 1px 1px #000;
  font-size: 1.25rem;
}

// Post https://dev.to/asagiri/backdrop-filter-blur-header-sticky-1120