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

Asked 26/6, 2018 at 14:54 Answered 3/2, 2020 at 13:32

Solved javascript html css fixed onscroll

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

I want the first header, that's already fixed at the top of the screen, to stop before the second 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 such answers don't work for me because they're using libraries that I'm not working with, such as jQuery, or they are overly, overly complicated. I've got it to work, so far, with getBoundingClientRect(), but 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>

Crinoid answered 26/6, 2018 at 14:54 Comment(0)

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>
  <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.

Semipro answered 26/6, 2018 at 15:11 Comment(2)

Wow, you made the header element a child of .content. You just don't know how much your answer and the previous answer helped me, I made this with JavaScript and attached an onscroll event listener, which took a lot of computing power. With this, it cut off a lot of it. THANKS A LOT!!!! – Crinoid 26/6, 2018 at 15:14

Haha xD Welcome! :D – Semipro 26/6, 2018 at 15:17

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>

Welterweight answered 3/2, 2020 at 13:32 Comment(3)

Love this! I was trying to add a click handler to the headers so that clicking them would scroll you to the top of that section but it seems that the dom's scrollIntoView function doesn't work well with the viewport because of the floating sticky. Would you happen to know a way to make this work? – Sarilda 7/3, 2023 at 0:48

@Sarilda Oh, interesting. Do you have a code snippet? – Welterweight 9/3, 2023 at 12:29

Yes, here it is; scroll down until all the headers are grouped together, then click on header 3, then 2, then 1 to see how none of the content is displayed incorrectly by the scrollIntoView function being called: jsfiddle.net/qt56cpv8 – Sarilda 20/3, 2023 at 15:58

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

Demo:

Explanation:

Recommended topics

Hot tags