<app-header>

()

app-header is container element for app-toolbars at the top of the screen that can have scroll effects. By default, an app-header moves away from the viewport when scrolling down and if using reveals, the header slides back when scrolling back up. For example:

<app-header reveals>
  <app-toolbar>
    <div main-title>App name</div>
  </app-toolbar>
</app-header>

app-header can also condense when scrolling down. To achieve this behavior, the header must have a larger height than the sticky element in the light DOM. For example:

<app-header style="height: 96px;" condenses fixed>
  <app-toolbar style="height: 64px;">
    <div main-title>App name</div>
  </app-toolbar>
</app-header>

In this case the header is initially 96px tall, and it shrinks to 64px when scrolling down. That is what is meant by “condensing”.

Sticky element

The element that is positioned fixed to top of the header's scrollTarget when a threshold is reached, similar to position: sticky in CSS. This element must be an immediate child of app-header. By default, the sticky element is the first `app-toolbar that is an immediate child of app-header.

<app-header condenses>
  <app-toolbar> Sticky element </app-toolbar>
</app-header>

Customizing the sticky element

<app-header condenses>
  <app-toolbar></app-toolbar>
  <app-toolbar sticky> Sticky element </app-toolbar>
</app-header>

Scroll target

The app-header's scrollTarget property allows to customize the scrollable element to which the header responds when the user scrolls. By default, app-header uses the document as the scroll target, but you can customize this property by setting the id of the element, e.g.

<div id="scrollingRegion" style="overflow-y: auto;">
  <app-header scroll-target="scrollingRegion">
  </app-header>
</div>

In this case, the scrollTarget property points to the outer div element. Alternatively, you can set this property programmatically:

appHeader.scrollTarget = document.querySelector("#scrollingRegion");

Backgrounds

app-header has two background layers that can be used for styling when the header is condensed or when the scrollable element is scrolled to the top.

Scroll effects

Scroll effects are optional visual effects applied in app-header based on scroll position. For example, The Material Design scrolling techniques recommends effects that can be installed via the effects property. e.g.

<app-header effects="waterfall">
  <app-toolbar>App name</app-toolbar>
</app-header>

Importing the effects

To use the scroll effects, you must explicitly import them in addition to app-header:

<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">

List of effects

app-header {
  background-color: red;
  --app-header-background-rear-layer: {
    /* The header is blue when condensed */
    background-color: blue;
  };
}
app-header {
  --app-header-background-front-layer: {
    background-image: url(...);
  };
}
<app-header style="height: 300px;" effects="parallax-background">
  <app-toolbar>App name</app-toolbar>
</app-header>

The fraction determines how far the background moves relative to the scroll position. This value can be assigned via the scalar config value and it is typically a value between 0 and 1 inclusive. If scalar=0, the background doesn't move away from the header.

<app-header condenses reveals effects="resize-title">
  <app-toolbar>
      <h4 condensed-title>App name</h4>
  </app-toolbar>
  <app-toolbar>
      <h1 main-title>App name</h1>
  </app-toolbar>
</app-header>
app-header {
  --app-header-shadow: {
    box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2);
  };
}
<app-header condenses reveals effects="waterfall">
  <app-toolbar>
      <h1 main-title>App name</h1>
  </app-toolbar>
</app-header>

Content attributes

Attribute | Description | Default ———-|———————|—————————————- sticky | Element that remains at the top when the header condenses. | The first app-toolbar in the light DOM.

Styling

Mixin | Description | Default ——|————-|———- --app-header-background-front-layer | Applies to the front layer of the background. | {} --app-header-background-rear-layer | Applies to the rear layer of the background. | {} --app-header-shadow | Applies to the shadow. | {}