106 lines
3.5 KiB
HTML
106 lines
3.5 KiB
HTML
<!--
|
|
@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({
|
|
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>
|