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.