Skip to content

Instantly share code, notes, and snippets.

@garand
Created August 2, 2014 16:05
Show Gist options
  • Save garand/175cad080a6554cc2190 to your computer and use it in GitHub Desktop.
Save garand/175cad080a6554cc2190 to your computer and use it in GitHub Desktop.
Header Shrink
// Header Shrink
var header_element = $('body > header');
var header_height = header_element.outerHeight(); // Get the header height dynamically so it can be set with CSS
var header_offset = header_element.next().css('paddingTop').slice(0,-2) - header_height; // Find out the offset for the header to take into account any existing padding in the CSS
scaleHeader(); // Run once on page load so the header shrinks if the page loads already scrolled down
$(window).scroll(function() { scaleHeader(); });
function scaleHeader() {
var scroll_top = $(window).scrollTop();
if (scroll_top < header_height/2) {
header_element.css('height',header_height - scroll_top);
if (scroll_top < 0)
header_element.next().css('paddingTop',header_offset + (header_height - scroll_top) - 1);
}
else if (scroll_top > header_height/2)
header_element.css('height',header_height/2);
if (scroll_top > header_height)
header_element.addClass('small');
else
header_element.removeClass('small');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment