Sticky headers - Demo 2

Using CSS position: sticky

by pjbelo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky headers</title>
</head>

<body>
    
    <h1>Sticky headers!</h1>

    <h1 class="sticky1">h1: 1</h1>
    <h2 class="sticky2">h2: 1.1</h2>
    <h3 class="sticky3">h3: 1.1.1</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
    <h3 class="sticky3">h3: 1.1.2</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>

    <h3 class="sticky3">h3: 1.1.3</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
    <h2 class="sticky2">h2: 1.2</h2>
    <h3 class="sticky3">h3: 1.2.1</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
    <h3 class="sticky3">h3: 1.2.2</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
    <h3 class="sticky3">h3: 1.2.3</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
    <h2 class="sticky2">h2: 1.3</h2>
    <h3 class="sticky3">h3: 1.3.1</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
    <h3 class="sticky3">h3: 1.3.2</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
    <h3 class="sticky3">h3: 1.3.3</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
    <h1 class="sticky1">h1: 2</h1>
    <h2 class="sticky2">h2: 2.1</h2>
    <h3 class="sticky3">h3: 2.1.1</h3>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    <p>bla bla bla</p>
    
...

CSS

.sticky1 {
        position: sticky;
        position: -webkit-sticky;  /* Safari */
        top: 0px;
        background-color: peru;
        }
        .sticky2 {
        position: sticky;
        position: -webkit-sticky;
        top: 37px;
        background-color: chocolate;
        }
        .sticky3 {
        position: sticky;
        position: -webkit-sticky;
        top: 65px;
        background-color: tan;
        }