Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
Remove fancy back scroll effects. Fixes Polymer/polymer#430
Browse files Browse the repository at this point in the history
  • Loading branch information
ebidel committed Mar 4, 2014
1 parent b3a62b3 commit 11e27a0
Show file tree
Hide file tree
Showing 6 changed files with 15 additions and 107 deletions.
2 changes: 1 addition & 1 deletion _includes/top-nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% endif %}
{% endcapture %}

<app-bar theme="{{theme | trim }}" class="bar" unresolved>
<app-bar theme="{{theme | trim }}" class="bar fixed" unresolved>
<a href="/docs/start/getting-the-code.html" class="paper-button {% if page.navgroup == 'start' %}active{% endif %}" borderless sink>Start</a>
<a href="/docs/polymer/polymer.html" class="paper-button {% if page.navgroup == 'docs' %}active{% endif %}" borderless sink>Docs</a>
<a href="/resources/faq.html" class="paper-button {% if page.navgroup == 'resources' %}active{% endif %}" borderless sink>Resources</a>
Expand Down
34 changes: 7 additions & 27 deletions css/elements/scroll-area.css
Original file line number Diff line number Diff line change
Expand Up @@ -79,47 +79,27 @@ pre .com, pre .comment, .prettyprint .com, .prettyprint .comment { color: #8a8a8
/* line 7, ../../sass/elements/scroll-area.scss */
:host([sidebar]) { padding-left: 265px; }

/* @polyfill :host[sidebar] app-bar.fixed */
/* line 12, ../../sass/elements/scroll-area.scss */
:host([sidebar]) ::content app-bar.fixed { margin-left: 265px; }

/* @polyfill :host:not([sidebar]) app-bar */
/* line 17, ../../sass/elements/scroll-area.scss */
:host(:not([sidebar])) ::content app-bar { -moz-transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; }

/* @polyfill :host.scrolling site-banner */
/* line 24, ../../sass/elements/scroll-area.scss */
/* line 12, ../../sass/elements/scroll-area.scss */
:host(.scrolling:not(.mobile)) ::content site-banner { height: 80px !important; padding-bottom: 0; position: fixed !important; width: 100%; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }

/* @polyfill :host.scrolling:not(.mobile) > article */
/* line 35, ../../sass/elements/scroll-area.scss */
/* line 23, ../../sass/elements/scroll-area.scss */
:host(.scrolling:not(.mobile)) ::content > article { padding-top: 310px; }

/* @polyfill :host.scrolling:not(.mobile) app-bar */
/* line 40, ../../sass/elements/scroll-area.scss */
:host(.scrolling:not(.mobile)) ::content app-bar { /* Note: this number should be updated if the height of of the nav changes */ -moz-transform: translate3d(0, -80px, 0); -webkit-transform: translate3d(0, -80px, 0); transform: translate3d(0, -80px, 0); position: inherit; }

/* @polyfill :host.scrolling app-bar.fixed.down */
/* line 49, ../../sass/elements/scroll-area.scss */
:host(.scrolling) ::content app-bar.fixed.down { -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/* @polyfill :host.scrolling app-bar.fixed */
/* line 56, ../../sass/elements/scroll-area.scss */
:host(.scrolling) ::content app-bar.fixed { -webkit-transition: -webkit-transform 300ms ease-in-out; transition: -webkit-transform 300ms ease-in-out; -moz-transition: -moz-transform 300ms ease-in-out; }

/* @polyfill :host app-bar.fixed */
/* line 63, ../../sass/elements/scroll-area.scss */
/* line 28, ../../sass/elements/scroll-area.scss */
::content app-bar.fixed { position: fixed; }

/* @polyfill :host > article */
/* line 68, ../../sass/elements/scroll-area.scss */
/* line 33, ../../sass/elements/scroll-area.scss */
::content > article { padding: 24px 64px; max-width: 912px; min-height: 300px; overflow: hidden; }

@media only screen and (max-width: 850px) { /* line 77, ../../sass/elements/scroll-area.scss */
@media only screen and (max-width: 850px) { /* line 42, ../../sass/elements/scroll-area.scss */
:host([sidebar]) { padding-left: 0 !important; }
/* @polyfill :host > article */
/* line 82, ../../sass/elements/scroll-area.scss */
/* line 47, ../../sass/elements/scroll-area.scss */
::content > article { padding-left: 35px; padding-right: 35px; } }
@media only screen and (max-width: 580px) { /* @polyfill :host > article */
/* line 91, ../../sass/elements/scroll-area.scss */
/* line 56, ../../sass/elements/scroll-area.scss */
::content > article { padding-top: 70px; } }
4 changes: 0 additions & 4 deletions css/elements/site-banner.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,6 @@ pre .com, pre .comment, .prettyprint .com, .prettyprint .comment { color: #8a8a8
/* line 39, ../../sass/elements/site-banner.scss */
::content h1 { font-size: 45px !important; -webkit-transform-origin: 0 0; transform-origin: 0 0; }

/* @polyfill scroll-area:not(.scrolling) h1 */
/* line 47, ../../sass/elements/site-banner.scss */
:ancestor(scroll-area:not(.scrolling)) ::content header h1 { -webkit-transition: -webkit-transform 200ms linear; transition: -webkit-transform 200ms linear; }

/* @polyfill :host header.shrink h1 */
/* line 53, ../../sass/elements/site-banner.scss */
::content header.shrink h1 { -webkit-transform: scale(0.44444); transform: scale(0.44444); }
Expand Down
32 changes: 1 addition & 31 deletions elements/scroll-area.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,38 +26,16 @@
this.ticking = false; // Reset the tick so we can capture the next onScroll.

var currentScrollY = this.latestKnownScrollY;
var previousScrollY = this.previousScrollY;
// 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) {
Expand All @@ -67,10 +45,8 @@
}

Polymer('scroll-area', {
hasBackScrolled: false,
latestKnownScrollY: 0,
previousScrollY: 0,
//appBarTranslateY: 0,
smallBannerSizeReached: false,
ticking: false,
fancyheader: true, // header sticks on scroll
Expand All @@ -87,7 +63,6 @@
this.async(function() {
this.siteBannerHeight = siteBanner.offsetHeight;
this.appBarHeight = this.appBar.offsetHeight;
//this.appBarTranslateY = -this.appBarHeight;
});

// For testing.
Expand All @@ -111,12 +86,7 @@
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');
}
});
})();
Expand Down
40 changes: 1 addition & 39 deletions sass/elements/scroll-area.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,6 @@
padding-left: $sidebarWidth;
}

/* @polyfill :host[sidebar] app-bar.fixed */
:host([sidebar]) ::content app-bar.fixed {
margin-left: $sidebarWidth;
}

/* @polyfill :host:not([sidebar]) app-bar */
:host(:not([sidebar])) ::content app-bar {
-moz-transform: translate3d(0,0,0) !important;
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
}

/* @polyfill :host.scrolling site-banner */
:host(.scrolling:not(.mobile)) ::content site-banner {
height: $siteBannerHeightMin !important;
Expand All @@ -36,29 +24,6 @@
padding-top: $siteBannerHeightMax + $additonalPadding;
}

/* @polyfill :host.scrolling:not(.mobile) app-bar */
:host(.scrolling:not(.mobile)) ::content app-bar {
/* Note: this number should be updated if the height of of the nav changes */
-moz-transform: translate3d(0,-$siteBannerHeightMin,0);
-webkit-transform: translate3d(0,-$siteBannerHeightMin,0);
transform: translate3d(0,-$siteBannerHeightMin,0);
position: inherit;
}

/* @polyfill :host.scrolling app-bar.fixed.down */
:host(.scrolling) ::content app-bar.fixed.down {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

/* @polyfill :host.scrolling app-bar.fixed */
:host(.scrolling) ::content app-bar.fixed {
-webkit-transition: -webkit-transform 300ms ease-in-out;
transition: -webkit-transform 300ms ease-in-out;
-moz-transition: -moz-transform 300ms ease-in-out; // FF has unprefixed transitions but not transforms
}

/* @polyfill :host app-bar.fixed */
::content app-bar.fixed {
position: fixed;
Expand Down Expand Up @@ -88,10 +53,7 @@
// Phone
@media only screen and (max-width: $break-small) {
/* @polyfill :host > article */
::content > article {
// padding-left: $additonalPadding;
// padding-right: $additonalPadding;

::content > article {
padding-top: $siteBannerHeightMinMobile + 10;
}
}
10 changes: 5 additions & 5 deletions sass/elements/site-banner.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@
transform-origin: 0 0;
}

/* @polyfill scroll-area:not(.scrolling) h1 */
:ancestor(scroll-area:not(.scrolling)) ::content header h1 {
-webkit-transition: -webkit-transform 200ms linear;
transition: -webkit-transform 200ms linear;
}
// /* @polyfill scroll-area:not(.scrolling) h1 */
// :ancestor(scroll-area:not(.scrolling)) ::content header h1 {
// -webkit-transition: -webkit-transform 200ms linear;
// transition: -webkit-transform 200ms linear;
// }

/* @polyfill :host header.shrink h1 */
::content header.shrink h1 {
Expand Down

0 comments on commit 11e27a0

Please sign in to comment.