javascript - How can I make multiple on scroll fixed headers/navbars that stick at the very top of the page?

Question

Does anyone know how to make multiple on scroll fixed headers? I've checked answers such as this.

It's kind of what I want, but I want that header to stop before another header and when the first header gets scrolled past the second header should be taking the first header's place and stick at the very top of the screen. But they don't work for me because they're using libraries that I'm not working with(jQuery, etc.) and they are overly, overly complicated. I've tried to do this, I got it to work with getBoundingClientRect() with only 2 headers. I've provided the HTML&CSS part here:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

@import url("https://fonts.googleapis.com/css?family=Roboto:100");

h1 {
  letter-spacing: 3px;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  color: #fff;
  font-weight: 100;
}

.header {
  width: 100%;
  height: 50px;
}

.header:nth-of-type(1){
   background-color: dodgerblue;
    position: fixed;
}

.header:nth-of-type(2){
   background-color: rebeccapurple;
}

.header:nth-of-type(3){
   background-color: chartreuse;
}

.content {
  width: 100%;
  height: 100%;
  background: linear-gradient(70deg, orange, crimson);
  padding-top: 50px;
    
}

<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>

Answer 1

Demo:

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

@import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
  letter-spacing: 3px;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  color: #fff;
  font-weight: 100;
}

.content {
  width: 100%;
  height: 100%;
  background: linear-gradient(70deg, orange, crimson);
}

.content .header {
  width: 100%;
  height: 50px;
  position: sticky;
  top: 0;
}

.content:nth-of-type(1) .header {
  background-color: dodgerblue;
}

.content:nth-of-type(2) .header {
  background-color: rebeccapurple;
}

.content:nth-of-type(3) .header {
  background-color: chartreuse;
}

<div class="content">
  <header class="header">
    <h1>HEADER 1</h1>
  </header>
  <div class="content-inner">
    <h1>CONTENT</h1>
  </div>
</div>
<div class="content">

  <header class="header">
    <h1>HEADER 2</h1>
  </header>
  <div class="content-inner">
    <h1>CONTENT</h1>
  </div>
</div>
<div class="content">

  <header class="header">
    <h1>HEADER 3</h1>
  </header>
  .content
  <h1>CONTENT</h1>
</div>