Adjust header when scrolled

On some sites I’ll have a standard header at the top, and once the user scrolls down the page we make a smaller header fixed at the top (smaller logo, less padding on links). This code adds a class of “shrink” to the header, which you can use to change the header. It also adds a <div class="bumper"> which you can set to the height of the old header. Without this, you’d see the site’s content jump up when you position: fixed; the header.

// Adjust header when scrolled
// Author: Bill Erickson
// URL: http://www.billerickson.net/code/adjust-header-scrolled/
jQuery(document).ready(function($){
$(".site-header").after('<div class="bumper"></div>');
$(window).scroll(function () {
if ($(document).scrollTop() > 1 ) {
$('.site-header').addClass('shrink');
} else {
$('.site-header').removeClass('shrink');
}
});
});
view raw global.js hosted with ❤ by GitHub

css header javascript

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk