åå Multiple Sticky Headers





  1. Tutorials
  2. CSS
  3. Multiple Sticky Headers

Multiple Sticky Headers

In this tutorial, you will learn how to add multiple sticky headers with pure CSS. The header at the top stays but when the user scrolls to the next section, the header is switched. Watch the video below for a detailed tutorial.

HTML

<body>
    <section>
        <div class="section-heading">
            <h2>Header 1</h2>
        </div>
        <div class="section-content">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt eius alias non ullam consequuntur ut magni perferendis molestias voluptas aut, dicta quos iste nam odit neque maiores officiis facilis minus.</p>
        </div>
    </section>

    <section>
        <div class="section-heading">
            <h2>Header 2</h2>
        </div>
        <div class="section-content">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt eius alias non ullam consequuntur ut magni perferendis molestias voluptas aut, dicta quos iste nam odit neque maiores officiis facilis minus.</p>
        </div>
    </section>

    <section>
        <div class="section-heading">
            <h2>Header 3</h2>
        </div>
        <div class="section-content">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt eius alias non ullam consequuntur ut magni perferendis molestias voluptas aut, dicta quos iste nam odit neque maiores officiis facilis minus.</p>
        </div>
    </section>

    <section>
        <div class="section-heading">
            <h2>Header 4</h2>
        </div>
        <div class="section-content">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt eius alias non ullam consequuntur ut magni perferendis molestias voluptas aut, dicta quos iste nam odit neque maiores officiis facilis minus.</p>
        </div>
    </section>

    <section class="last">
        <div class="section-content">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt eius alias non ullam consequuntur ut magni perferendis molestias voluptas aut, dicta quos iste nam odit neque maiores officiis facilis minus.</p>
        </div>
    </section>
</body>

CSS

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
}

section {
  position: relative;
  display: flex;
  flex-direction: column;
}

section:nth-of-type(1) {
  background-color: #3F9EBC;
}

section:nth-of-type(2) {
  background-color: #F7B744;
}

section:nth-of-type(3) {
  background-color: #8ECAE6;
}

section:nth-of-type(4) {
  background-color: #F1853B;
}

section:nth-of-type(5) {
  background-color: #79C8B0;
}

.section-heading {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #2E3537;
  box-shadow: 0 0 3px black;
  z-index: 999;
  padding: 5px 15px;
}

.section-heading h2 {
  margin: 5px 0;
  color: white;
}

.section-content {
  padding: 3rem;
  height: 93.7vh
}