<header class="site-header">
  <svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12,8L10.67,8.09C9.81,7.07 7.4,4.5 5,4.5C5,4.5 3.03,7.46 4.96,11.41C4.41,12.24 4.07,12.67 4,13.66L2.07,13.95L2.28,14.93L4.04,14.67L4.18,15.38L2.61,16.32L3.08,17.21L4.53,16.32C5.68,18.76 8.59,20 12,20C15.41,20 18.32,18.76 19.47,16.32L20.92,17.21L21.39,16.32L19.82,15.38L19.96,14.67L21.72,14.93L21.93,13.95L20,13.66C19.93,12.67 19.59,12.24 19.04,11.41C20.97,7.46 19,4.5 19,4.5C16.6,4.5 14.19,7.07 13.33,8.09L12,8M9,11A1,1 0 0,1 10,12A1,1 0 0,1 9,13A1,1 0 0,1 8,12A1,1 0 0,1 9,11M15,11A1,1 0 0,1 16,12A1,1 0 0,1 15,13A1,1 0 0,1 14,12A1,1 0 0,1 15,11M11,14H13L12.3,15.39C12.5,16.03 13.06,16.5 13.75,16.5A1.5,1.5 0 0,0 15.25,15H15.75A2,2 0 0,1 13.75,17C13,17 12.35,16.59 12,16V16H12C11.65,16.59 11,17 10.25,17A2,2 0 0,1 8.25,15H8.75A1.5,1.5 0 0,0 10.25,16.5C10.94,16.5 11.5,16.03 11.7,15.39L11,14Z" /> </svg>
  <div class="company-name">
    KittyCorp
  </div>
</header>

<main>
  <section><div class="sticky-div"></div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia eum illum? Iure, ipsam mollitia? Porro omnis tempora, aliquid quisquam, impedit nostrum tenetur iure ducimus asperiores ad dicta voluptate numquam.</p></section>
  <section class="dark"><div class="sticky-div"></div><p>Dolore, molestiae? Ratione quasi itaque optio quos doloribus assumenda, reiciendis modi exercitationem deserunt sequi ipsa quia debitis magni maiores illo officia odit. Excepturi, mollitia dolores? Recusandae consequatur totam perferendis temporibus?</p></section>
  <section><div class="sticky-div"></div><p>Velit repudiandae maiores quaerat repellendus illum aspernatur incidunt deleniti adipisci, ducimus voluptatibus alias provident quis ratione iste explicabo nemo quisquam ex minima eligendi. Error minus consequuntur reiciendis. Quidem, dolore in.</p></section>
  <section><div class="sticky-div"></div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia eum illum? Iure, ipsam mollitia? Porro omnis tempora, aliquid quisquam, impedit nostrum tenetur iure ducimus asperiores ad dicta voluptate numquam.</p></section>
  <section class="dark"><div class="sticky-div"></div><p>Dolore, molestiae? Ratione quasi itaque optio quos doloribus assumenda, reiciendis modi exercitationem deserunt sequi ipsa quia debitis magni maiores illo officia odit. Excepturi, mollitia dolores? Recusandae consequatur totam perferendis temporibus?</p></section>
  <section><div class="sticky-div"></div><p>Velit repudiandae maiores quaerat repellendus illum aspernatur incidunt deleniti adipisci, ducimus voluptatibus alias provident quis ratione iste explicabo nemo quisquam ex minima eligendi. Error minus consequuntur reiciendis. Quidem, dolore in.</p></section>
  <section><div class="sticky-div"></div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia eum illum? Iure, ipsam mollitia? Porro omnis tempora, aliquid quisquam, impedit nostrum tenetur iure ducimus asperiores ad dicta voluptate numquam.</p></section>
  <section class="dark"><div class="sticky-div"></div><p>Dolore, molestiae? Ratione quasi itaque optio quos doloribus assumenda, reiciendis modi exercitationem deserunt sequi ipsa quia debitis magni maiores illo officia odit. Excepturi, mollitia dolores? Recusandae consequatur totam perferendis temporibus?</p></section>
  <section><div class="sticky-div"></div><p>Velit repudiandae maiores quaerat repellendus illum aspernatur incidunt deleniti adipisci, ducimus voluptatibus alias provident quis ratione iste explicabo nemo quisquam ex minima eligendi. Error minus consequuntur reiciendis. Quidem, dolore in.</p></section>
  <section><div class="sticky-div"></div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia eum illum? Iure, ipsam mollitia? Porro omnis tempora, aliquid quisquam, impedit nostrum tenetur iure ducimus asperiores ad dicta voluptate numquam.</p></section>
  <section class="dark"><div class="sticky-div"></div><p>Dolore, molestiae? Ratione quasi itaque optio quos doloribus assumenda, reiciendis modi exercitationem deserunt sequi ipsa quia debitis magni maiores illo officia odit. Excepturi, mollitia dolores? Recusandae consequatur totam perferendis temporibus?</p></section>
  <section><div class="sticky-div"></div><p>Velit repudiandae maiores quaerat repellendus illum aspernatur incidunt deleniti adipisci, ducimus voluptatibus alias provident quis ratione iste explicabo nemo quisquam ex minima eligendi. Error minus consequuntur reiciendis. Quidem, dolore in.</p></section>
</main>

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

body {
  margin: 0;
  font: 400 1.2rem/1.8 system-ui, sans-serif;
  overflow-x: hidden;
}

.site-header {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 1rem;
  background: rgba(0, 0, 0, 0); /*transparent*/
  color: rgb(245, 245, 245);
  mix-blend-mode: difference;

  svg {
    fill: rgb(245, 245, 245);

  }
  .company-name {
    margin-left: 0.5rem;
  }
}

section {
  background: rgb(245, 245, 245);
  color: rgb(38, 40, 44);

  .sticky-div {
    width: 100vw;
    height: 4rem;
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 5;
    background: inherit;
    opacity: .9;
  }

  p {
    padding: 1rem 5rem 5rem;
  }

  &:nth-child(2) {
    background: rgb(14, 17, 22);
    color: rgb(219, 220, 220);
  }

  &:nth-child(4) {
    background: rgb(180, 192, 197);
  }

  &:nth-child(6) {
    background: rgb(221, 44, 0);
    color: rgb(245, 245, 245);
  }

  &:nth-child(8) {
    background: rgb(98, 0, 234);
    color: rgb(245, 245, 245);
  }

  &:nth-child(10) {
    background: rgb(214, 197, 0);
  }
}

/*
  https://css-tricks.com/chameleonic-header/#comment-1754722
*/