Sticky Header

The PacemStickyHeaderElement eases the functionalities of a material-design-like header.

<pacem-sticky-header visibility="quickreturn"></pacem-sticky-header>

It automagically binds itself to the ancestor Shell element and then coordinates the appearence of the actual header based on the user' scrolling behavior.

In this page a PacemStickyHeaderElement gives the shared header a "sticky" behavior.

Properties

• offset (readonly, does emit): returns the current scrolling offset (type: { "top": number, "left": number }).
• visible (readonly, does emit): returns whether the header is currently visible or not (boolean).
• visibility (does not emit): gets or sets the visibility behavior. Allowed values are 'persistent' (default) and 'quickreturn'.
• threshold (does not emit): number that defines the scroll amount that triggers the visibility (default 0).

CSS Classes

The Shell gets decorated with specific CSS classes accordingly to the current sticky state:

• sticky-header-top: the document scroll amount is below or equal to the threshold.
• sticky-header-scroll: the document scroll amount is beyond the threshold.
• sticky-header-fade: the header is not visible or hiding (might happen when 'quickreturn' is set as visibility).