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
).To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.