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 a

Answer 1

If you want header 2 and header 3 to be sticky, but show below the next add top with padding to each header (here header-2 has top: 50px; so it will not override the first, and the third has top: 100px;).

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

@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;
  position: sticky;
  top: 0px;
}

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

}

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

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

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

.header-2{
  top: 50px;
}

.header-3{
  top: 100px;
}

HEADER 1
CONTENT
HEADER 2
CONTENT
HEADER 3
CONTENT