如何在滚动固定标题/导航栏上制作多个贴在页面顶部的固定标题/导航栏？

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>

View on jsFiddle

Explanation:

position: sticky with correct markup will do the work

PS: I know there is already an answer using position: sticky but in that solution the previous header doesn't stop but overlaps with the next one. In my solution is stops before the next sticking.

Answer 2

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; }

 <section> <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> </section>

Answer 3

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; }

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