Remove fancy back scroll effects. Fixes Polymer/polymer#430

Polymer · Mar 4, 2014 · 11e27a0 · 11e27a0
1 parent b3a62b3
commit 11e27a0
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 107 deletions.
diff --git a/_includes/top-nav.html b/_includes/top-nav.html
@@ -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>

diff --git a/css/elements/scroll-area.css b/css/elements/scroll-area.css
@@ -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; } }
diff --git a/css/elements/site-banner.css b/css/elements/site-banner.css
@@ -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); }

diff --git a/elements/scroll-area.html b/elements/scroll-area.html
@@ -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) {
@@ -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
@@ -87,7 +63,6 @@
       this.async(function() {
         this.siteBannerHeight = siteBanner.offsetHeight;
         this.appBarHeight = this.appBar.offsetHeight;
-        //this.appBarTranslateY = -this.appBarHeight;
       });
 
       // For testing.
@@ -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');
     }
   });
 })();

diff --git a/sass/elements/scroll-area.scss b/sass/elements/scroll-area.scss
@@ -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;
@@ -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;
@@ -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;
   }
 }
diff --git a/sass/elements/site-banner.scss b/sass/elements/site-banner.scss
@@ -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 {