elegant-header

My take on the scroll-up-to-reveal website header


License
MIT
Install
bower install elegant-header

Documentation

elegant-header

My take on the scroll-up-to-reveal website header

662 bytes gzipped (1.56KB uncompressed)

Features

  • Adds a 'padding' element adjacent to the original header element, with identical height.
  • Sets the original header's position to fixed.
  • Moves the top offset of the header in relation to the scroll amount.
  • Fades the header out as it is hidden.
  • Adds a subtle box shadow when the header is displayed anywhere other than its original location at the top of the page.
  • Uses a timeout to cancel any half-scrolled headers after a second or two.