forked from unbug/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscroll-area.html
More file actions
121 lines (103 loc) · 3.8 KB
/
scroll-area.html
File metadata and controls
121 lines (103 loc) · 3.8 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<link rel="import" href="../components/polymer-media-query/polymer-media-query.html">
<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="scroll-area" attributes="sidebar">
<template>
<link rel="stylesheet" href="../css/elements/scroll-area.css">
<polymer-media-query query="min-width: 581px" queryMatches="{{fancyheader}}"></polymer-media-query>
<content></content>
</template>
<script>
(function() {
function onScroll_() {
this.previousScrollY = this.latestKnownScrollY;
this.latestKnownScrollY = window.scrollY;
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;
var delta = currentScrollY - previousScrollY;
this.smallBannerSizeReached = this.siteBannerHeight - currentScrollY < this.appBarHeight; //80px;
if (this.smallBannerSizeReached) {
this.classList.add('scrolling');
this.header && this.header.classList.add('shrink');
if (delta < 0) { // scrollback
this.hasBackScrolled = true;
this.appBar.classList.add('down');
} else {
this.appBar.classList.remove('down');
}
// Explicitly control app-bar position with scroll.
// // Navbar moves in opposite direction of scroll.
// this.appBarTranslateY -= delta;
// this.appBarTranslateY = Math.min(
// Math.max(this.appBarTranslateY, -this.appBarHeight), 0);
// this.appBar.style.WebkitTransform = 'translate3d(0,' + this.appBarTranslateY +'px,0)';
} else {
this.classList.remove('scrolling');
this.header && this.header.classList.remove('shrink');
//this.appBarTranslateY = -this.appBarHeight;
if (currentScrollY <= 0) {
this.hasBackScrolled = false;
}
// 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', {
hasBackScrolled: false,
latestKnownScrollY: 0,
previousScrollY: 0,
//appBarTranslateY: 0,
smallBannerSizeReached: false,
ticking: false,
fancyheader: true, // header sticks on scroll
sidebar: false,
ready: 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;
//this.appBarTranslateY = -this.appBarHeight;
});
// 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 && 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');
this.appBar.classList.remove('fixed');
this.appBar.classList.remove('down');
}
},
hasBackScrolledChanged: function() {
this.appBar.classList.toggle('fixed');
}
});
})();
</script>
</polymer-element>