@npm-polymer/paper-scroll-header-panel v2.0.0
<paper-scroll-header-panel>
This element has been deprecated in favor of app-layout.
Material design: Scrolling techniques
paper-scroll-header-panel contains a header section and a content section. The
header is initially on the top part of the view but it scrolls away with the
rest of the scrollable content. Upon scrolling slightly up at any point, the
header scrolls back into view. This saves screen space and allows users to
access important controls by easily moving them back to the view.
Important: The paper-scroll-header-panel will not display if its parent does not have a height.
Using layout classes or custom properties, you can easily make the paper-scroll-header-panel fill the screen
<body class="fullbleed layout vertical">
<paper-scroll-header-panel class="flex">
<paper-toolbar slot="header">
<div>Hello World!</div>
</paper-toolbar>
<div slot="content">Content goes here...</div>
</paper-scroll-header-panel>
</body>or, if you would prefer to do it in CSS, just give html, body, and paper-scroll-header-panel a height of 100%:
html, body {
height: 100%;
margin: 0;
}
paper-scroll-header-panel {
height: 100%;
}paper-scroll-header-panel works well with paper-toolbar but can use any element
that represents a header by adding a paper-header class to it.
Note: If the class paper-header is used, the header must be positioned relative or absolute. e.g.
.paper-header {
position: relative;
}<paper-scroll-header-panel>
<div class="paper-header" slot="header">Header</div>
<div slot="content">Content goes here...</div>
</paper-scroll-header-panel>Styling
=======
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
| --paper-scroll-header-panel-full-header | To change background for toolbar when it is at its full size | {} |
| --paper-scroll-header-panel-condensed-header | To change the background for toolbar when it is condensed | {} |
| --paper-scroll-header-panel-container | To override or add container styles | {} |
| --paper-scroll-header-panel-header-container | To override or add header styles | {} |
Changes in 2.0
Distribution is now done with slot="header" and slot="content" attributes (previously, paper-toolbar or another element with the .paper-header class would be distributed as the header, and other elements would be distributed as the content):
<paper-scroll-header-panel>
<div class="paper-header" slot="header">Header</div>
<div slot="content">Content goes here...</div>
</paper-scroll-header-panel>7 years ago