├── demos ├── images │ ├── bg2.jpg │ ├── bg3.jpg │ ├── bg5.jpg │ ├── bg6.jpg │ └── bg9.jpg ├── demo1.html ├── demo3.html ├── demo2.html ├── sample-content.html ├── demo9.html ├── demo4.html ├── demo5.html ├── demo6.html ├── demo8.html ├── demo7.html └── lorem-ipsum.html ├── README.md ├── bower.json ├── index.html ├── core-scroll-header-panel.css ├── metadata.html ├── demo.html └── core-scroll-header-panel.html /demos/images/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlearchive/core-scroll-header-panel/HEAD/demos/images/bg2.jpg -------------------------------------------------------------------------------- /demos/images/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlearchive/core-scroll-header-panel/HEAD/demos/images/bg3.jpg -------------------------------------------------------------------------------- /demos/images/bg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlearchive/core-scroll-header-panel/HEAD/demos/images/bg5.jpg -------------------------------------------------------------------------------- /demos/images/bg6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlearchive/core-scroll-header-panel/HEAD/demos/images/bg6.jpg -------------------------------------------------------------------------------- /demos/images/bg9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlearchive/core-scroll-header-panel/HEAD/demos/images/bg9.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | core-scroll-header-panel 2 | ======================== 3 | 4 | See the [component page](https://www.polymer-project.org/0.5/docs/elements/core-scroll-header-panel.html) for more information. 5 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "core-scroll-header-panel", 3 | "private": true, 4 | "dependencies": { 5 | "core-field": "Polymer/core-field#master", 6 | "core-icon-button": "Polymer/core-icon-button#master", 7 | "core-input": "Polymer/core-input#master", 8 | "core-media-query": "Polymer/core-media-query#master", 9 | "core-toolbar": "Polymer/core-toolbar#master", 10 | "core-resizable": "Polymer/core-resizable#master" 11 | } 12 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /core-scroll-header-panel.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6 | Code distributed by Google as part of the polymer project is also 7 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 8 | */ 9 | 10 | :host { 11 | display: block; 12 | position: relative; 13 | overflow: hidden; 14 | } 15 | 16 | #mainContainer { 17 | position: absolute; 18 | top: 0; 19 | right: 0; 20 | bottom: 0; 21 | left: 0; 22 | box-sizing: border-box; 23 | -moz-box-sizing: border-box; 24 | -webkit-overflow-scrolling: touch; 25 | overflow-x: hidden; 26 | overflow-y: auto; 27 | -webkit-transform: translateZ(0); 28 | transform: translateZ(0); /* github.com/Polymer/core-scroll-header-panel/pull/38 */ 29 | } 30 | 31 | #headerContainer { 32 | position: absolute; 33 | top: 0; 34 | right: 0; 35 | left: 0; 36 | } 37 | 38 | .bg-container { 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | overflow: hidden; 45 | } 46 | 47 | #headerBg, #condensedHeaderBg { 48 | position: absolute; 49 | top: 0; 50 | left: 0; 51 | width: 100%; 52 | height: 100%; 53 | background-repeat: no-repeat; 54 | background-size: cover; 55 | background-position: center center; 56 | } 57 | 58 | #condensedHeaderBg { 59 | opacity: 0; 60 | } -------------------------------------------------------------------------------- /metadata.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 32 | 33 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /demos/demo1.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo1 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
Title
67 | 68 | 69 | 70 | 71 | 72 |
73 | 74 | 75 | 76 |
77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /demos/demo3.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo3 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 | 71 | 72 | 73 |
74 | 75 | 76 | 77 |
78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /demos/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo2 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 | 69 | 70 |
Title
71 | 72 | 73 | 74 |
75 | 76 | 77 | 78 |
79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /demos/sample-content.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 62 | 63 | -------------------------------------------------------------------------------- /demos/demo9.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo9 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 74 | 75 | 76 | 77 | 78 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 |
93 | 94 | 95 | 96 |
97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /demos/demo4.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo4 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
81 | 82 | 83 |
Title
84 | 85 | 86 | 87 |
88 | 89 | 90 | 91 |
92 | 93 | 94 | 95 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /demos/demo5.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo5 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 |
81 | 82 | 83 |
Title
84 | 85 | 86 | 87 |
88 | 89 | 90 | 91 |
92 | 93 | 94 | 95 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 |
Title
86 | 87 | 88 | 89 |
90 | 91 | 92 | 93 |
94 | 95 | 96 | 97 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /demos/demo6.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo6 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 73 | 74 | 75 | 76 | 77 | 79 | 80 | 81 | 82 | 83 | 84 |
85 | 86 | 87 |
Title
88 | 89 | 90 | 91 |
92 | 93 | 94 | 95 |
96 | 97 | 98 | 99 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /demos/demo8.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo8 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 |
102 | 103 | 104 | 105 |
106 |
Lorem ipsum dolor sit amet
107 |
Iisque perfecto dissentiet cum et
108 |
109 | 110 | 111 | 112 | 113 | 114 |
115 | 116 | 117 | 118 |
119 | 120 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /demos/demo7.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | core-scroll-header-panel: demo7 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 | 83 | 84 |
Title
85 | 86 | 87 | 88 |
89 | 90 |

Resize window to toggle between fixed header and scrolled header

91 | 92 | 93 |
94 | 95 | 96 | 97 | 98 | 99 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /demos/lorem-ipsum.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 42 | 43 | -------------------------------------------------------------------------------- /core-scroll-header-panel.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 52 | 53 | 54 | 55 | 56 | 57 | 79 | 360 | 361 | --------------------------------------------------------------------------------