Sticky headers - Demo 1

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>Countries List</title>
</head>
<body>
    
    <h1>Countries</h1>
    <div id="countries-list">

            <div class="sticky">A</div>
            <ul>
                <li>Afghanistan</li>
                <li>Albania</li>
                <li>Algeria</li>
                <li>Andorra</li>
                <li>Angola</li>
                <li>Antigua and Barbuda</li>
                <li>Argentina</li>
                <li>Armenia</li>
                <li>Australia</li>
                <li>Austria</li>
                <li>Azerbaijan</li>
            </ul>

            <div class="sticky">B</div>
            <ul>
                <li>Bahrain</li>
                <li>Bangladesh</li>
                <li>Barbados</li>
                <li>Belarus</li>
                <li>Belgium</li>
                <li>Belize</li>
                <li>Benin</li>
                <li>Bhutan</li>
                <li>Bolivia</li>
                <li>Bosnia and Herzegovina</li>
                <li>Botswana</li>
                <li>Brazil</li>
                <li>Brunei</li>
                <li>Bulgaria</li>
                <li>Burkina Faso</li>
                <li>Burundi</li>
            </ul>

            <div class="sticky">C</div>            
            <ul>
                <li>Cambodia</li>
                <li>Cameroon</li>
                <li>Canada</li>
                <li>Cape Verde</li>
                <li>Central African Republic</li>
                <li>Chad</li>
                <li>Chile</li>
                <li>China</li>
                <li>Colombia</li>
                <li>Comoros</li>
                <li>Congo, Republic of the</li>
                <li>Congo, Democratic Republic of the</li>
                <li>Costa Rica</li>
                <li>Cote d'Ivoire</li>
        ...

CSS

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  /* set some style */
  background-color: teal;
  color: white;
  padding: 5px;
}

/* set some style */
/* remove bullet points and ident left */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* set some spacing */
li {
  padding: 5px;
}