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:
$(".site-header").after('<div class="bumper"></div>');
$(window).scroll(function () {
if ($(document).scrollTop() > 1 ) {
} else {
view raw global.js hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

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

Let's Talk