refactor(affix): fulfill api

demo/documentation/components/affix/enUS/basic.md

@@ -3,10 +3,16 @@
 <div class="container">
   <div class="padding"></div>
   <div class="content">
-    <n-affix :top="60"><n-tag>Top 50px</n-tag></n-affix>
+    <n-row>
+      <n-col :span="12">
+        <n-affix :top="60"><n-tag>Top 50px</n-tag></n-affix>
+      </n-col>
+      <n-col :span="12">
+        <n-affix :bottom="60"><n-tag>Bottom 60px</n-tag></n-affix>
+      </n-col>
+    </n-row>
     <!-- <n-affix :bottom="60" style="margin-left: 80px"><n-tag>Bottom 50px</n-tag></n-affix>
     <n-affix :top="60" :bottom="60" style="margin-left: 200px"><n-tag>Top 50px & Bottom 50px</n-tag></n-affix> -->
-    <!-- <n-affix :bottom="60"><n-tag>Bottom 60px</n-tag></n-affix> -->
   </div>
 </div>
 ```
@@ -17,7 +23,6 @@
   background-color: rgba(128, 128, 128, .3);
   border-radius: 6px;
   overflow: auto;
-  position: relative;
 }
 
 .padding {

demo/documentation/components/affix/enUS/index.md

@@ -1,4 +1,5 @@
 # Affix
 ```demo
 basic
+position
 ```

demo/documentation/components/affix/enUS/position.md

@@ -0,0 +1,43 @@
+# Position
+Affix can be `absolute` or `fix` positioned. You may need some css tricks to make it works as following. By default position is set to `fix`, because in most cases scrolled element is `#document`.
+```html
+<div class="absolute-anchor-container">
+  <div class="container">
+    <div class="padding"></div>
+    <div class="content">
+      <n-row>
+        <n-col :span="12">
+          <n-affix :top="60" position="absolute"><n-tag>Top 50px</n-tag></n-affix>
+        </n-col>
+        <n-col :span="12">
+          <n-affix :bottom="60" position="absolute"><n-tag>Bottom 60px</n-tag></n-affix>
+        </n-col>
+      </n-row>
+    </div>
+  </div>
+</div>
+```
+```css
+.absolute-anchor-container {
+  width: 100%;
+  height: 200px;
+  position: relative;
+}
+
+.container {
+  height: 200px;
+  background-color: rgba(128, 128, 128, .3);
+  border-radius: 6px;
+  overflow: auto;
+}
+
+.padding {
+  height: 150px;
+  width: 100%;
+  background-color: rgba(128, 128, 128, .15);
+}
+
+.content {
+  height: 600px;
+}
+```

demo/loaders/convertMd2Doc.js

@@ -68,7 +68,7 @@ function parseDemosAsAnchor (demosLiteral) {
     .map(demoName => demoName.trim())
     .filter(demoName => demoName.length)
   const linkTags = demoNames.map(demoName => `<n-anchor-link :title="anchorLinkMap.get('${kababCase(demoName)}') || ''" href="#${kababCase(demoName)}"/>`)
-  return `<n-anchor :top="0" affix style="width: 132px;">${linkTags.join('\n')}</n-anchor>`
+  return `<n-anchor :top="24" position="absolute" affix style="width: 132px;">${linkTags.join('\n')}</n-anchor>`
 }
 
 function generateScript (demosLiteral, components = []) {

packages/common/Affix/src/main.vue

@@ -2,7 +2,8 @@
   <div
     class="n-affix"
     :class="{
-      [`n-affix--affixed`]: affixed
+      [`n-affix--affixed`]: affixed,
+      [`n-affix--absolute-positioned`]: position === 'absolute'
     }"
     :style="style"
   >
@@ -27,6 +28,10 @@ export default {
     bottom: {
       type: Number,
       default: null
+    },
+    position: {
+      type: String,
+      default: 'fix'
     }
   },
   data () {
@@ -34,25 +39,27 @@ export default {
       container: null,
       stickToTop: false,
       stickToBottom: false,
-      memorizedTop: null,
-      affixTop: null
+      bottomAffixedTriggerScrollTop: null,
+      topAffixedTriggerScrollTop: null
     }
   },
   computed: {
+    affixed () {
+      return this.stickToBottom || this.stickToTop
+    },
     style () {
       const style = {}
-      if (this.affixed && this.affixTop !== null) {
-        style.top = `${this.affixTop}px`
+      if (this.stickToTop && this.top !== null) {
+        style.top = `${this.top}px`
+      }
+      if (this.stickToBottom && this.bottom !== null) {
+        style.bottom = `${this.bottom}px`
       }
       return style
-    },
-    affixed () {
-      return this.stickToTop || this.stickToBottom
     }
   },
   mounted () {
     this.init()
-    this.memorizeTop()
   },
   beforeDestroy () {
     if (this.container) {
@@ -71,35 +78,36 @@ export default {
         this.handleScroll()
       }
     },
-    memorizeTop () {
-      const {
-        top
-      } = this.$el.getBoundingClientRect()
-      const containerScrollTop = this.container.scrollTop
-      const delta = containerScrollTop - this.top
-      this.memorizedTop = top + delta
-    },
     handleScroll (e) {
       const containerEl = this.container.nodeName === '#document' ? this.container.documentElement : this.container
-      let scrollTop = containerEl.scrollTop
-      let scrollBottom = containerEl.scrollBottom
-      const originalAffixed = this.affixed
-      if (this.top !== null && scrollTop >= this.top) {
+      if (this.affixed) {
+        if (containerEl.scrollTop <= this.topAffixedTriggerScrollTop) {
+          this.stickToTop = false
+          this.topAffixedTriggerScrollTop = null
+        }
+        if (containerEl.scrollTop >= this.bottomAffixedTriggerScrollTop) {
+          this.stickToBottom = false
+          this.bottomAffixedTriggerScrollTop = null
+        }
+        return
+      }
+      const containerRect = containerEl.getBoundingClientRect()
+      const affixRect = this.$el.getBoundingClientRect()
+      const pxToTop = affixRect.top - containerRect.top
+      const pxToBottom = containerRect.bottom - affixRect.bottom
+      if (this.top !== null && pxToTop <= this.top) {
         this.stickToTop = true
+        this.topAffixedTriggerScrollTop = containerEl.scrollTop - (this.top - pxToTop)
       } else {
         this.stickToTop = false
+        this.topAffixedTriggerScrollTop = null
       }
-      if (this.bottom !== null && scrollBottom >= this.bottom) {
+      if (this.bottom !== null && pxToBottom <= this.bottom) {
         this.stickToBottom = true
+        this.bottomAffixedTriggerScrollTop = containerEl.scrollTop + this.bottom - pxToBottom
       } else {
         this.stickToBottom = false
-      }
-      if (!originalAffixed && this.affixed) {
-        // console.log(e, this.$el.getBoundingClientRect().top)
-        this.affixTop = this.memorizedTop
-        // debugger
-      } else {
-        this.memorizeTop()
+        this.bottomAffixedTriggerScrollTop = null
       }
     }
   }

packages/common/Anchor/index.js

@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import Anchor from './src/main.vue'
+import Anchor from './src/AnchorAdapter.vue'
 import AnchorLink from './src/Link.vue'
 
 Anchor.install = function (Vue) {

packages/common/Anchor/src/AnchorAdapter.vue

@@ -9,6 +9,8 @@
     v-else
     :target="target"
     :top="top"
+    :bottom="bottom"
+    :position="position"
   >
     <anchor
       :target="target"
@@ -40,6 +42,14 @@ export default {
     affix: {
       type: Boolean,
       default: false
+    },
+    position: {
+      type: String,
+      default: undefined
+    },
+    bottom: {
+      type: String,
+      default: undefined
     }
   }
 }

styles/Affix.scss

@@ -3,5 +3,8 @@
 @include b(affix) {
   @include m(affixed) {
     position: fixed;
+    @include m(absolute-positioned) {
+      position: absolute;
+    }
   }
 }

styles/Grid.scss

@@ -5,7 +5,7 @@
     display: flex;
   }
   width: 100%;
-  position: relative;
+  // position: relative;
 }
 
 @mixin col-size-mixin ($span) {
@@ -27,7 +27,7 @@
   vertical-align: top;
   box-sizing: border-box;
   display: inline-block;
-  position: relative;
+  // position: relative;
   @for $i from 1 through 24 {
     @include col-size-mixin($i);
   }