forked from Polymer/old-docs-site
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscroll-area.html
More file actions
106 lines (93 loc) · 3.49 KB
/
scroll-area.html
File metadata and controls
106 lines (93 loc) · 3.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-media-query/core-media-query.html">
<polymer-element name="scroll-area" attributes="sidebar">
<template>
<link rel="stylesheet" href="../css/elements/scroll-area.css">
<core-media-query query="min-width: 581px" queryMatches="{{fancyheader}}"></core-media-query>
<content></content>
</template>
<script>
(function() {
function onScroll_() {
this.previousScrollY = this.latestKnownScrollY;
/* IE10 only supports pageYOffset */
this.latestKnownScrollY = window.scrollY || window.pageYOffset;
requestTick_.bind(this)();
}
function requestTick_() {
if (!this.ticking) {
window.requestAnimationFrame(update_.bind(this));
}
this.ticking = true;
}
function update_() {
this.ticking = false; // Reset the tick so we can capture the next onScroll.
var currentScrollY = this.latestKnownScrollY;
// var previousScrollY = this.previousScrollY;
this.smallBannerSizeReached = this.siteBannerHeight - currentScrollY < this.appBarHeight; //80px;
if (this.smallBannerSizeReached) {
this.classList.add('scrolling');
this.header && this.header.classList.add('shrink');
} else {
this.classList.remove('scrolling');
this.header && this.header.classList.remove('shrink');
// Fix and shrink header when it hits the top of the page.
if (this.header && this.header.offsetTop - currentScrollY <= 0) {
this.header.classList.add('shrink');
}
}
}
Polymer('scroll-area', {
latestKnownScrollY: 0,
previousScrollY: 0,
smallBannerSizeReached: false,
ticking: false,
fancyheader: true, // header sticks on scroll
publish: {
sidebar: {value: false, reflect: true}
},
attached: function() {
this.init();
},
init: function() {
var siteBanner = this.querySelector('site-banner');
this.appBar = siteBanner.querySelector('app-bar');
this.header = siteBanner.querySelector('header');
// Give DOM some time to do layout.
this.async(function() {
this.siteBannerHeight = siteBanner.offsetHeight;
this.appBarHeight = this.appBar.offsetHeight;
});
// For testing.
// this.siteBannerHeight = 286;
// this.appBarHeight = 80;
// bind() returns new function. Save named reference.
this.onscroll = onScroll_.bind(this);
this.fancyheaderChanged();
// Handle pageload in middle of page.
if ((window.scrollY || window.pageYOffset) && this.fancyheader) {
this.onscroll();
}
},
fancyheaderChanged: function() {
if (this.fancyheader) {
window.addEventListener('scroll', this.onscroll, false);
} else {
window.removeEventListener('scroll', this.onscroll, false);
this.classList.remove('scrolling');
this.header && this.header.classList.remove('shrink');
}
}
});
})();
</script>
</polymer-element>