README.md

Header

A container element for navigation and other content at the top of the screen with (optional) visual effects based on scroll position. Based on Polymer's app-header element using vanilla web technologies (CSS, JavaScript and HTML).

Demos

• Scrolling header - Scrolls with the page
• Scrolling header with blend background color effect - Scrolls with the page and changes the header background color when scrolling
• Scrolling header with parallax background effect - Scrolls with the page and moves the header background image at a different rate than the foreground when scrolling
• Condenses header - Shrinks when scrolling down
• Reveals header - Slides back the header when scrolling up
• Fixed header - Stays at the top of the visible viewport when scrolling
• Header with blend background color effect - Changes the header background color when scrolling
• Header with blend background image effect - Changes the header background image when scrolling
• Header with parallax and fade background effects - 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
• Header with parallax and blend background effects

Examples

.mdk-header {
  background-color: #5C6BC0;
  color: #fff !important;
}

Scrolling header

By default, a header moves away from the viewport when scrolling down.

<div class="mdk-header mdk-js-header">
  <div class="mdk-header__content">
    <button type="button">Toggle</button>
  </div>
</div>

Revealing header

The header can also slide back when scrolling up, when using the reveals option.

<div class="mdk-header mdk-js-header" reveals>
  <div class="mdk-header__content">
    <button type="button">Toggle</button>
  </div>
</div>

Condensing header

The header can also condense when scrolling down. To achieve this behavior, the header must use the condenses option and have a larger height than the [primary] element in the DOM. For example:

In this case the header is initially 200px tall, and it shrinks to 64px when scrolling down.

<div class="mdk-header mdk-js-header" style="height: 200px;" 
  reveals condenses>
  <div class="mdk-header__content">
    <button style="height: 64px;" type="button">Toggle</button>
  </div>
</div>

Primary element

As the header condenses, the primary element is stacked up and would always stay above other elements. By default, the primary element is the first immediate child of the .mdk-header__content element, but it can also be configured by adding the primary attribute to another element.

Scroll target

The scrollTargetSelector property of the header component allows to customize the scrollable element to which the header responds when the user scrolls. By default, the header uses the document as the scroll target, but you can customize this property by assigning a value directly or via the scroll-target attribute on the HTML element.

<div id="scrollingRegion" style="overflow-y: auto;">
  <div class="mdk-header mdk-js-header" 
    scroll-target="scrollingRegion">
    <!-- header content -->
  </div>
</div>

Or, programatically:

// scroll target ID
header.scrollTargetSelector = 'scrollingRegion'

// the document
header.scrollTargetSelector = 'document'

// HTMLElement
header.scrollTargetSelector = document.querySelector('#scrollingRegion')

JavaScript

Initialize the header component by adding the mdk-js-header class.

Options

The header options can be used programatically (see Programmatic usage below) or via attributes on the HTML element.

Property	Description	Default
condenses	Collapse the header when scrolling down, leaving only the [primary] element visible. If there is no [primary] element, the first child remains visibile.	false
reveals	Slides back the header when scrolling back up.	false
fixed	Mantains the header fixed at the top.	false
disabled	Disables all scroll effects.	false
transformDisabled	Disables transform effects.	false
scrollTargetSelector	The scrollable element to which the header responds when the user scrolls. Can also be configured by adding the scroll-target attribute on the HTML element.	document

Methods

Method	Description
getScrollState()	Returns an object containing the progress value of the scroll and the top position of the header.
willCondense()	Returns true if the header will condense based on the size of the header.
isOnScreen()	Returns true if the element is visible in the current viewport.
isContentBelow()	Returns true if there's content below the element.
destroy()	Destroys the header.
init()	(Re)Initializes the header (only needs to be called after using destroy).

Programmatic usage

Get a reference to a header component and interact with the API.

var headerNode = document.querySelector('.mdk-js-header')
var header = headerNode.mdkHeader

// Set the `fixed` option via property assignment
header.fixed = true

// Get the scroll state
console.log(header.getScrollState())

// Or get the scroll state from the scroll target
document.documentElement.addEventListener('scroll', function () {
  console.log(header.getScrollState())
})

Sometimes you need to initialize a header dynamically, for example when using libraries like Vue.js or Angular2 where you need to hook into the application lifecycle.

var headerNode = document.querySelector('.mdk-js-header')

// Initialize header
domFactory.handler.upgradeElement(headerNode, 'mdk-header')

// Get a reference to the header component
var header = headerNode.mdkHeader

// Use the header API
header.condenses = true

// You can also destroy the header before removing it from the DOM
header.destroy()

Reactivity

The header options are reactive, which means that when assigning options programatically (i.e. header.fixed = true) the component will update itself to reflect the new option value and trigger DOM changes.

---

Get help

Get help directly from our team via our Slack channel. Request invite