_header.html

{% markdown %}
# Header

A container element for navigation and other content at the top of the screen with (optional) visual effects based on scroll position.

- [Basic header demo #1](header.html) - Scrolls with the page
- [Basic header blend demo #2](header-blend.html) - Scrolls with the page and changes the header background color when scrolling
- [Basic parallax header demo #3](header-parallax.html) - Scrolls with the page and moves the header background image at a different rate than the foreground when scrolling
- [Condenses header demo](header-condenses.html) - Shrinks when scrolling down
- [Reveals header demo](header-reveals.html) - Slides back the header when scrolling up
- [Fixed header demo](header-fixed.html) - Stays at the top of the visible viewport when scrolling
- [Blend background color header demo](header-blend-color.html) - Changes the header background color when scrolling
- [Blend background image header demo](header-blend-image.html) - Changes the header background image when scrolling
- [Parallax and fade background header demo](header-parallax-fade.html) - Moves the header background image at a different rate than the foreground when scrolling and fades the background image into a background color after the header condenses
- [Parallax and blend background header demo](header-parallax-blend.html)
{% endmarkdown %}