Qubyte Codes

When I first put together the CSS for this blog I avoided a fixed header since the header felt a bit large, and I didn't want to take up too much space which could be used for content.

The solution is a header which shrinks as the reader scrolls down. This gives back a little space, and maintains access to the navigation bar (which is a part of the header). To make it look nice, the title animates between the smaller and larger states using a CSS transition. The CSS looks something like:

h1 {
  font-size: 2rem;
  margin: 1rem 0;
  transition: all 0.3s;
}

.smaller h1 {
  font-size: 1rem;
  margin: 0.5rem 0;
}

I'm a novice when it comes to CSS, so let me know if I'm missing a trick!

The markup for the top header (which has not changed), looks like:

<header class="top-header">
  <h1>...</h1>
  <nav>...</nav>
</header>

To trigger the transition, a little JavaScript is needed to detect when a scroll event occurs. When the page is not scrolled down the header has no additional classes added. When the page is scrolled a class is added to make the header h1 text and margin smaller. When the page is scrolled down and then back to the top, the header h1 text returns to its original size.

var $header = document.querySelector('.top-header');

function checkHeaderSmallText() {
  if (window.pageYOffset > 0) {
    $header.classList.add('smaller');
  } else {
    $header.classList.remove('smaller');
  }
}

window.addEventListener('scroll', checkHeaderSmallText, false);

checkHeaderSmallText();

So why is this progressive? Most importantly, no markup (with the exception of an added script tag in the head) has been added. Browsers with JavaScript disabled or screen readers will interpret the site as they did before. If the feature fails for any reason, or example if deferred scripts or classList are not supported, then an error will be thrown and the header will fail to shrink. Should CSS transitions not be supported, the header will immediately go from the larger to the smaller state on scrolling. These failure modes are acceptable in my opinion.

In the future I have a more elaborate header animation in mind. If you're interested in such things, watch this space!