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

Without your javascript code, i can suggest you use position:sticky which achieves what you want.

Read more here position CSS

It is pretty well supported in modern browsers caniuse position sticky

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 1
CONTENT
HEADER 2
CONTENT
HEADER 3
CONTENT