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'); | |
} | |
}); | |
}); |