fix(MdApp): fix fixed-last not revealing the first row after scroll up

Author: marcosmoura

src/components/MdApp/MdAppMixin.js

@@ -46,7 +46,9 @@ export default {
         top: 0,
         titleSize: 20,
         hasElevation: true,
-        revealActive: false
+        revealActive: false,
+        fixedLastActive: false,
+        fixedLastHeigth: false
       },
       drawer: {
         active: false,
@@ -188,28 +190,25 @@ export default {
       }
     },
     handleFixedLastMode ($event) {
-      let { scrollTop, toolbarHeight } = this.getToolbarConstrants($event)
+      let { scrollTop, toolbarHeight, safeAmount } = this.getToolbarConstrants($event)
       const toolbar = this.MdApp.toolbar.element
       const firstRow = toolbar.querySelector('.md-toolbar-row:first-child')
       const firstRowHeight = firstRow.offsetHeight
 
-      if (scrollTop > firstRowHeight) {
-        this.setToolbarMarginAndHeight(scrollTop - firstRowHeight, toolbarHeight)
-      } else {
-        this.setToolbarMarginAndHeight(0, toolbarHeight)
-      }
+      window.clearTimeout(this.revealTimer)
 
-      /* if (firstRowHeight) {
-        if (scrollTop < initialHeight - firstRowHeight) {
-          toolbar.style.height = scrollAmount + 'px'
-        } else {
-          toolbar.style.height = firstRowHeight + 'px'
-        }
-      }
+      this.revealTimer = window.setTimeout(() => {
+        this.revealLastPos = scrollTop
+      }, 100)
 
-      let { threshold, toolbarHeight } = this.getToolbarConstrants($event)
+      this.setToolbarMarginAndHeight(scrollTop - firstRowHeight, toolbarHeight)
+      this.MdApp.toolbar.fixedLastHeigth = firstRowHeight
 
-      this.setToolbarMarginAndHeight(scrollTop - threshold, toolbarHeight) */
+      if (scrollTop >= firstRowHeight) {
+        this.MdApp.toolbar.fixedLastActive = this.revealLastPos > scrollTop + safeAmount
+      } else {
+        this.MdApp.toolbar.fixedLastActive = true
+      }
     },
     handleModeScroll ($event) {
       if (this.mdMode === 'reveal') {
@@ -253,6 +252,7 @@ export default {
     }
 
     if (this.mdMode === 'fixed-last') {
+      this.MdApp.toolbar.fixedLastActive = true
       this.handleFixedLastMode({
         target: {
           scrollTop: 0

src/components/MdApp/MdAppToolbar.vue

@@ -12,13 +12,20 @@
       toolbarClasses () {
         return {
           'md-no-elevation': !this.MdApp.toolbar.hasElevation,
-          'md-reveal-active': this.MdApp.toolbar.revealActive
+          'md-reveal-active': this.MdApp.toolbar.revealActive,
+          'md-fixed-last-active': this.MdApp.toolbar.fixedLastActive
         }
       },
       toolbarStyles () {
-        return {
+        let styles = {
           'top': `${this.MdApp.toolbar.top}px`
         }
+
+        if (this.MdApp.toolbar.fixedLastActive) {
+          styles['transform'] = `translate3D(0, ${this.MdApp.toolbar.fixedLastHeigth}px, 0)`
+        }
+
+        return styles
       }
     },
     mounted () {
@@ -51,4 +58,10 @@
       will-change: height, box-shadow, transform;
     }
   }
+
+  .md-fixed-last-active {
+    transition: .3s $md-transition-stand-timing;
+    transition-property: box-shadow, transform;
+    will-change: height, box-shadow, transform;
+  }
 </style>