bug fix for #54

src/components/parallax/Parallax.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   div(
     class="parallax"
-    v-bind:style="{ minHeight: this.height + 'px' }"
+    v-bind:style="{ minHeight: this.normalizedHeight + 'px' }"
   )
     div(class="parallax__image-container")
       img(
@@ -47,7 +47,6 @@
     methods: {
       init () {
         if (this.$refs.img.complete) {
-          console.log('here')
           this.translate()
           this.listeners()
           return this.$vuetify.bus.pub('parallax:ready')
@@ -57,7 +56,7 @@
           this.translate()
           this.listeners()
           this.$vuetify.bus.pub('parallax:ready')
-        }, { once: true })
+        }, false)
       },
 
       objHeight () {

src/mixins/translatable.js

@@ -1,14 +1,23 @@
 export default {
   data () {
     return {
-      obj_height: null,
       parallax: null,
-      parallax_dist: null,
-      bottom: null,
-      top: null,
-      scroll_top: null,
-      window_height: null,
-      window_bottom: null
+      parallaxDist: null,
+      elOffsetTop: null,
+      percentScrolled: null,
+      scrollTop: null,
+      windowHeight: null,
+      windowBottom: null
+    }
+  },
+
+  computed: {
+    normalizedHeight () {
+      return Number(this.height.toString().replace(/(^[0-9]*$)/, '$1'))
+    },
+
+    imgHeight () {
+      return this.objHeight()
     }
   },
 
@@ -30,25 +39,25 @@ export default {
     translate () {
       this.calcDimensions()
 
-      let percent_scrolled = (
-        (this.window_bottom - this.top) / (Number(this.height) + this.window_height)
+      this.percentScrolled = (
+        (this.windowBottom - this.elOffsetTop) / (this.normalizedHeight + this.windowHeight)
       )
 
-      this.parallax = Math.round(this.parallax_dist * percent_scrolled)
+      this.parallax = Math.round(this.parallaxDist * this.percentScrolled)
 
       if (this.translated) {
         this.translated()
       }
     },
 
     calcDimensions () {
-      this.obj_height = this.objHeight()
-      this.parallax_dist = this.obj_height - this.height
-      this.top = this.elOffsetTop()
-      this.bottom = this.top + this.height
-      this.scroll_top = window.pageYOffset
-      this.window_height = window.innerHeight
-      this.window_bottom = this.scroll_top + this.window_height
+      let offset = this.$el.getBoundingClientRect()
+
+      this.scrollTop = window.pageYOffset
+      this.parallaxDist = this.imgHeight - this.normalizedHeight
+      this.elOffsetTop = offset.top + this.scrollTop
+      this.windowHeight = window.innerHeight
+      this.windowBottom = this.scrollTop + this.windowHeight
     }
   }
 }