From 64859bb811b9db4b7539b21c06c35f2fb0d9865f Mon Sep 17 00:00:00 2001
From: wangwenzhang <wangwenzhang@uniqueway.com>
Date: Sat, 4 Apr 2020 20:34:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=9D=E8=AF=95=E4=BF=AE=E5=A4=8D=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=8D=A0=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                         |  2 +-
 src/components/ScrollAffix/index.vue | 43 +++++++++++++++++++++++-----
 src/main.js                          |  2 +-
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 629cec9..ef78dd7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hoc-element/affix",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "lib/hoc-el-affix.js",
   "description": "📌 Affix 将页面元素固定在可视范围内。",
   "author": "Wisdom <pdsu.wwz@foxmail.com>",
diff --git a/src/components/ScrollAffix/index.vue b/src/components/ScrollAffix/index.vue
index 5a6e24b..5d27758 100644
--- a/src/components/ScrollAffix/index.vue
+++ b/src/components/ScrollAffix/index.vue
@@ -1,10 +1,16 @@
 <template>
-  <div
-    ref="scroll-affix"
-    :style="affixStyle"
-    class="scroll-affix-container"
-  >
-    <slot/>
+  <div>
+    <div
+      v-if="showPlaceHolder"
+      :style="stylePlaceHolder"
+    ></div>
+    <div
+      ref="scroll-affix"
+      :style="affixStyle"
+      class="scroll-affix-container"
+    >
+      <slot/>
+    </div>
   </div>
 </template>
 
@@ -23,6 +29,10 @@ export default {
         position: 'absolute',
         top: 'initial'
       },
+      stylePlaceHolder: {
+
+      },
+      showPlaceHolder: false,
       instance: '',
       defaultInstancePosition: ''
     }
@@ -44,7 +54,9 @@ export default {
     },
     createAffix () {
       this.defaultInstancePosition = this.getInstanceRect().top
+
       this.beforeListener()
+      
       document.addEventListener('scroll', this.scrollListener)
     },
     setFixedForInstance () {
@@ -53,21 +65,38 @@ export default {
         top: `${this.offsetTop}px`
       }
     },
+    setPlaceHolder () {
+      const instanceRect = this.getInstanceRect()
+      this.stylePlaceHolder = {
+        width: instanceRect.width,
+        height: instanceRect.height,
+      }
+    },
     beforeListener () {
       if (this.defaultInstancePosition < this.offsetTop) {
         this.setFixedForInstance()
+
+        this.showPlaceHolder = true
+
+        this.setPlaceHolder()
       }
+
       this.defaultInstancePosition = this.getWindowScrollTop() + this.defaultInstancePosition
     },
     scrollListener () {
       const offsetTop = this.getInstanceRect().top
-      const windowScrollTop = this.getWindowScrollTop()
       if (offsetTop <= this.offsetTop) {
         this.setFixedForInstance()
+
+        this.setPlaceHolder()
       }
+
+      const windowScrollTop = this.getWindowScrollTop()
       const isArrivalDefault = (this.defaultInstancePosition - this.offsetTop) >= windowScrollTop
+
       if (isArrivalDefault && this.affixStyle.position === 'fixed') {
         this.affixStyle = {}
+        this.stylePlaceHolder = {}
       }
     }
   },
diff --git a/src/main.js b/src/main.js
index 61f589b..eefcc3f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,7 +9,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.0.2',
+  version: '0.0.3',
   install,
   HocElAffix
 }