How to set up a fixed header that shrinks on scroll in Genesis

A member asked:

Do you have any tutorials that will help me to make the site header stick to the top of the page and reduce the vertical padding upon scrolling, just like at: www.studiopress.com?

I have written about this in the past here: Shrinking Fixed Header in Genesis similar to that in Centric Pro.

In this tutorial I share a simplified version (esp. CSS) of the same.

Summary of the solution:

• When the user scrolls down, header gets a CSS class of shrink and when the user scrolls all the way to the top, this class is removed.
• When the header has shrink class on, we remove its padding and use CSS transition property for smooth animation.
• Taking the standard case of Primary Navigation appearing below the header, we shall use JS (on load and resize) to automatically calculate the height of the fixed header and push the Primary Nav down by that many pixels using top margin.

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Create a file named say, global.js in child theme's js directory (create if not existing) having the following: