Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/contacts.html

Created October 10, 2025 01:35
Show Gist options
  • Save prof3ssorSt3v3/ba07e66a8876e6066d37590661c9d6cc to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/ba07e66a8876e6066d37590661c9d6cc to your computer and use it in GitHub Desktop.
Download ZIP
Example of Position Sticky
Raw
contacts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contacts</title>
<style>
:root {
--bg: hsl(300, 50%, 40%);
--fg: hsl(300, 10%, 90%);
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
}
html,
body {
font-size: 1rem;
font-family: sans-serif;
margin: 0;
padding: 0;
font-weight: 300;
}
header {
background-color: var(--bg);
color: var(--fg);
h1 {
font-size: 3rem;
font-weight: inherit;
line-height: 1;
padding-block: var(--space-sm);
padding-inline: var(--space-md);
margin: 0;
}
}
main {
max-width: 50em;
margin-block: 1rem;
margin-inline: var(--space-lg);
}
.contacts {
border-top: 1px solid var(--bg);
position: relative;
width: 40em;
&::before {
content: attr(data-letter);
text-transform: uppercase;
display: block;
padding: 0.5rem 1rem;
background-color: var(--bg);
color: var(--fg);
}
}
.contact {
color: var(--bg);
padding-inline-start: var(--space-md);
}
.contact:first-of-type {
margin-top: -4rem;
}
.letter {
position: sticky;
z-index: 10;
top: -1rem;
margin-inline: 10em 0;
width: min-content;
background-color: var(--bg);
color: var(--fg);
font-size: 4rem;
padding: var(--space-sm);
border-bottom-right-radius: var(--space-md);
border-bottom-left-radius: var(--space-md);
}
</style>
</head>
<body>
<header>
<h1>Contact List</h1>
</header>
<main>
<section class="contacts" data-letter="a">
<div class="letter">A</div>
<p class="contact">Aaron</p>
<p class="contact">Abel</p>
<p class="contact">Abigail</p>
<p class="contact">Ada</p>
<p class="contact">Adele</p>
<p class="contact">Adrian</p>
<p class="contact">Aiden</p>
<p class="contact">Alan</p>
<p class="contact">Albert</p>
<p class="contact">Alex</p>
<p class="contact">Alexander</p>
<p class="contact">Alexis</p>
<p class="contact">Alice</p>
<p class="contact">Alicia</p>
<p class="contact">Allison</p>
<p class="contact">Amanda</p>
</section>
<section class="contacts" data-letter="b">
<div class="letter">B</div>
<p class="contact">Barbara</p>
<p class="contact">Barry</p>
<p class="contact">Beatrice</p>
<p class="contact">Ben</p>
<p class="contact">Beth</p>
<p class="contact">Bianca</p>
<p class="contact">Blair</p>
<p class="contact">Blake</p>
<p class="contact">Brenda</p>
<p class="contact">Brian</p>
<p class="contact">Bridget</p>
<p class="contact">Brittany</p>
<p class="contact">Brock</p>
<p class="contact">Bruce</p>
<p class="contact">Bryan</p>
<p class="contact">Brynn</p>
</section>
<section class="contacts" data-letter="c">
<div class="letter">C</div>
<p class="contact">Caleb</p>
<p class="contact">Cameron</p>
<p class="contact">Cara</p>
<p class="contact">Carl</p>
<p class="contact">Carmen</p>
<p class="contact">Caroline</p>
<p class="contact">Carrie</p>
<p class="contact">Carson</p>
<p class="contact">Cassandra</p>
<p class="contact">Catherine</p>
<p class="contact">Cecilia</p>
<p class="contact">Celeste</p>
<p class="contact">Chad</p>
<p class="contact">Charlie</p>
<p class="contact">Charlotte</p>
<p class="contact">Chloe</p>
</section>
<section class="contacts" data-letter="d">
<div class="letter">D</div>
<p class="contact">Dahlia</p>
<p class="contact">Daisy</p>
<p class="contact">Damian</p>
<p class="contact">Dana</p>
<p class="contact">Daniel</p>
<p class="contact">Dante</p>
<p class="contact">Daria</p>
<p class="contact">Darren</p>
<p class="contact">Daryl</p>
<p class="contact">David</p>
<p class="contact">Dean</p>
<p class="contact">Deanna</p>
<p class="contact">Deborah</p>
<p class="contact">Dennis</p>
<p class="contact">Derek</p>
<p class="contact">Desmond</p>
</section>
<section class="contacts" data-letter="e">
<div class="letter">E</div>
<p class="contact">Ebony</p>
<p class="contact">Eden</p>
<p class="contact">Edith</p>
<p class="contact">Eleanor</p>
<p class="contact">Eli</p>
<p class="contact">Elijah</p>
<p class="contact">Eliza</p>
<p class="contact">Elizabeth</p>
<p class="contact">Ella</p>
<p class="contact">Ellen</p>
<p class="contact">Eloise</p>
<p class="contact">Emily</p>
<p class="contact">Emma</p>
<p class="contact">Erica</p>
<p class="contact">Erin</p>
<p class="contact">Ethan</p>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment