Adirondack Style Header

Adirondack has a header/site title that shrinks on scroll.  It's a pretty simple effect to implement, but I figured I'd catalogue it here anyways.

Here's the CSS:

#header {
  width: 100%;
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 999;
.site-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3em;
  letter-spacing: 0px;
  line-height: 1.6em;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;

Basically, you're just fixing the position of the header, and then applying some typography styles to the site title class (usually the h1).  The transition will allow for that 'grow' and 'shrink' effect

Here's the JS:

function animateSiteTitle () {
  var siteTitle ='#header .site-title a');

  if(window.pageYOffset > 80){
    siteTitle.setStyle('font-size', '1em');

  if(window.pageYOffset < 80){
    siteTitle.setStyle('font-size', '3em');
}'scroll', animateSiteTitle);

The '80' in the if statements is just a magic scroll number.  Change that number to whatever you like. Quick and dirty, but it should work!