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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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'); | |
| } | |
| }); | |
| }); |
