How can I get this animation in WordPress?

Thanks, Kris!

Here's a demo I'm using to try to figure this out: http://codepen.io/mrhines1/pen/KwpRop?editors=011

It's from a tutorial here on Treehouse. I modified it so that the nav bar height transitions from 80px to 50px when the page scrolls past a certain point. Also, I have the font-size transition from 0.9em to 0.8em.

So far everything looks good when the nav area transitions down. But when the page is scrolled back up and the nav bar needs to go back to it's original size there is an abrupt jump in the animation. It's not smooth like it is when it minimizes. It looks as though the main contents padding is affected by the change in the nav bar's height.

Any ideas? Am I targeting the wrong class with the transitions?

You have this in the CSS:

.main-nav,
.main {
  position: relative; 
}

Try this instead:

.main-nav {
  position: relative; 
}

.main {
  position: absolute;
}

I tried it with the change in the CSS and I'm still seeing the main content "jump" when the nav bar increases back to 80px.

Thanks again, Kris!

I made a new pen: http://codepen.io/mrhines1/pen/wBKWMd

It's the same idea as the first one, except that I have moved the nav bar to the top of the screen right from the beginning. However, now I am not getting any of the transitions to work. I would still like the nav bar to minimize like it does in the other pen. The only JS code I have modified is changing "hdr" to an exact measurement of "10px" since the height of the header no longer comes into play.

Again, I'm new to JS so I'm not sure what I'm missing here.