hilton meyer

Sticky Headings

Came across a great article showing how to create a sticky heading. Really simple and love little additions like this that don't require a ton of changes and can be added as some sparkles to tweak the site. Probably not useful in every site but I must say that they are in something like a blog where you're creating content or tutorials and have the heading still showing.

/* Create stick headings */
h1,
h2,
h3,
h4 {
  letter-spacing: -1px;
  position: sticky;
  top: 0;
  background: var(--background);
  padding: 0.5em 0;
}