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.
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).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).