From 87c343e461a3c9b9dcba94dd23ef95b69f75d002 Mon Sep 17 00:00:00 2001
From: 崔琼雪 <cuiqiongxue@doumi.com>
Date: Fri, 15 Dec 2017 15:40:41 +0800
Subject: [PATCH] 增加逻辑： 1.当吸顶的时候增加一个div标签占位，可让过度更加顺滑（原有逻辑当到达顶部的时候会会变成绝对定位，后面的标签就会立即顶上去，会有跳动的过程，体验不佳）

---
 examples/routers/affix.vue     | 16 ++++++++++++++--
 src/components/affix/affix.vue | 14 ++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/examples/routers/affix.vue b/examples/routers/affix.vue
index fe38a9c..ca6f8de 100644
--- a/examples/routers/affix.vue
+++ b/examples/routers/affix.vue
@@ -10,12 +10,24 @@
     }
 </style>
 <template>
+<div>
     <Affix>
-        <span class="demo-affix">固定在最顶部</span>
+        <div class="demo-affix">固定在最顶部</div>
     </Affix>
+    <div v-for="(item,index) in arr">{{item}}</div>
+</div>
 </template>
 <script>
     export default {
-
+        data(){
+            return {
+                arr: []
+            }
+        },
+        created(){
+            for(let i = 0 ; i < 100 ; i++){
+                this.arr.push(i);
+            }
+        }
     }
 </script>
diff --git a/src/components/affix/affix.vue b/src/components/affix/affix.vue
index 44ac12a..8b9cb5e 100644
--- a/src/components/affix/affix.vue
+++ b/src/components/affix/affix.vue
@@ -1,8 +1,9 @@
 <template>
     <div>
-        <div :class="classes" :style="styles">
+        <div ref="point" :class="classes" :style="styles">
             <slot></slot>
         </div>
+        <div v-show="slot" :style="slotStyle"></div>
     </div>
 </template>
 <script>
@@ -52,7 +53,9 @@
         data () {
             return {
                 affix: false,
-                styles: {}
+                styles: {},
+                slot: false,
+                slotStyle: {}
             };
         },
         computed: {
@@ -95,6 +98,11 @@
                 // Fixed Top
                 if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
                     this.affix = true;
+                    this.slotStyle = {
+                        width: this.$refs.point.clientWidth + 'px',
+                        height: this.$refs.point.clientHeight + 'px'
+                    }
+                    this.slot = true;
                     this.styles = {
                         top: `${this.offsetTop}px`,
                         left: `${elOffset.left}px`,
@@ -103,6 +111,8 @@
 
                     this.$emit('on-change', true);
                 } else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
+                    this.slot = false;
+                    this.slotStyle = {};
                     this.affix = false;
                     this.styles = null;
 
--
libgit2 0.21.4