material-design-kit/demo/src/html/_header.html

Interactive web components inspired from Material Design, using vanilla CSS, JavaScript and HTML.

<h1>Header</h1>

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

<ul>
  <li><a href="header.html">Basic header demo #1</a> - Scrolls with the page</li>
  <li><a href="header-blend.html">Basic header blend demo #2</a> - Scrolls with the page and changes the header background color when scrolling</li>
  <li><a href="header-parallax.html">Basic parallax header demo #3</a> - Scrolls with the page and moves the header background image at a different rate than the foreground when scrolling</li>
  <li><a href="header-condenses.html">Condenses header demo</a> - Shrinks when scrolling down</li>
  <li><a href="header-reveals.html">Reveals header demo</a> - Slides back the header when scrolling up</li>
  <li><a href="header-fixed.html">Fixed header demo</a> - Stays at the top of the visible viewport when scrolling</li>
  <li><a href="header-blend-color.html">Blend background color header demo</a> - Changes the header background color when scrolling</li>
  <li><a href="header-blend-image.html">Blend background image header demo</a> - Changes the header background image when scrolling</li>
  <li><a href="header-parallax-fade.html">Parallax and fade background header demo</a> - 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</li>
  <li><a href="header-parallax-blend.html">Parallax and blend background header demo</a></li>
</ul>