feat(affix): split top into top & offset-top

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

@@ -5,10 +5,10 @@
   <div class="content">
     <n-row>
       <n-col :span="12">
-        <n-affix :top="60"><n-tag>Top 50px</n-tag></n-affix>
+        <n-affix :offset-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-affix :offset-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>

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

@@ -7,10 +7,10 @@ Affix can be `absolute` or `fix` positioned. You may need some css tricks to mak
     <div class="content">
       <n-row>
         <n-col :span="12">
-          <n-affix :top="60" position="absolute"><n-tag>Top 50px</n-tag></n-affix>
+          <n-affix :offset-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-affix :offset-bottom="60" position="absolute"><n-tag>Bottom 60px</n-tag></n-affix>
         </n-col>
       </n-row>
     </div>

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

@@ -1,7 +1,7 @@
 # Basic
 ```html
 <div style="height: 200px; padding-left: 200px;">
-  <n-anchor affix :top="80" style="z-index: 1;">
+  <n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
     <n-anchor-link title="The Narrator" href="#the-narrator"/>
     <n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
     <n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>

packages/common/Affix/src/main.vue

@@ -21,10 +21,18 @@ export default {
       type: Function,
       default: null
     },
+    offsetTop: {
+      type: Number,
+      default: null
+    },
     top: {
       type: Number,
       default: null
     },
+    offsetBottom: {
+      type: Number,
+      default: null
+    },
     bottom: {
       type: Number,
       default: null
@@ -47,13 +55,25 @@ export default {
     affixed () {
       return this.stickToBottom || this.stickToTop
     },
+    synthesizedOffsetTop () {
+      return this.offsetTop || this.top
+    },
+    synthesizedTop () {
+      return this.top || this.offsetTop
+    },
+    synthesizedBottom () {
+      return this.bottom || this.offsetBottom
+    },
+    synthesizedOffsetBottom () {
+      return this.offsetBottom || this.bottom
+    },
     style () {
       const style = {}
-      if (this.stickToTop && this.top !== null) {
-        style.top = `${this.top}px`
+      if (this.stickToTop && this.synthesizedOffsetTop !== null) {
+        style.top = `${this.synthesizedTop}px`
       }
-      if (this.stickToBottom && this.bottom !== null) {
-        style.bottom = `${this.bottom}px`
+      if (this.stickToBottom && this.synthesizedOffsetBottom !== null) {
+        style.bottom = `${this.synthesizedBottom}px`
       }
       return style
     }
@@ -81,11 +101,11 @@ export default {
     handleScroll (e) {
       const containerEl = this.container.nodeName === '#document' ? this.container.documentElement : this.container
       if (this.affixed) {
-        if (containerEl.scrollTop <= this.topAffixedTriggerScrollTop) {
+        if (containerEl.scrollTop < this.topAffixedTriggerScrollTop) {
           this.stickToTop = false
           this.topAffixedTriggerScrollTop = null
         }
-        if (containerEl.scrollTop >= this.bottomAffixedTriggerScrollTop) {
+        if (containerEl.scrollTop > this.bottomAffixedTriggerScrollTop) {
           this.stickToBottom = false
           this.bottomAffixedTriggerScrollTop = null
         }
@@ -95,16 +115,16 @@ export default {
       const affixRect = this.$el.getBoundingClientRect()
       const pxToTop = affixRect.top - containerRect.top
       const pxToBottom = containerRect.bottom - affixRect.bottom
-      if (this.top !== null && pxToTop <= this.top) {
+      if (this.synthesizedOffsetTop !== null && pxToTop <= this.synthesizedOffsetTop) {
         this.stickToTop = true
-        this.topAffixedTriggerScrollTop = containerEl.scrollTop - (this.top - pxToTop)
+        this.topAffixedTriggerScrollTop = containerEl.scrollTop - (this.synthesizedOffsetTop - pxToTop)
       } else {
         this.stickToTop = false
         this.topAffixedTriggerScrollTop = null
       }
-      if (this.bottom !== null && pxToBottom <= this.bottom) {
+      if (this.synthesizedOffsetBottom !== null && pxToBottom <= this.synthesizedOffsetBottom) {
         this.stickToBottom = true
-        this.bottomAffixedTriggerScrollTop = containerEl.scrollTop + this.bottom - pxToBottom
+        this.bottomAffixedTriggerScrollTop = containerEl.scrollTop + this.synthesizedOffsetBottom - pxToBottom
       } else {
         this.stickToBottom = false
         this.bottomAffixedTriggerScrollTop = null

packages/common/Anchor/src/AnchorAdapter.vue

@@ -10,24 +10,26 @@
     :target="target"
     :top="top"
     :bottom="bottom"
+    :offset-top="offsetTop"
+    :offset-bottom="offsetBottom"
     :position="position"
   >
-    <anchor
+    <n-anchor
       :target="target"
     >
       <slot />
-    </anchor>
+    </n-anchor>
   </n-affix>
 </template>
 
 <script>
-import Anchor from './Anchor'
+import NAnchor from './Anchor'
 import NAffix from '../../Affix'
 
 export default {
   name: 'NAnchor',
   components: {
-    Anchor,
+    NAnchor,
     NAffix
   },
   props: {
@@ -48,7 +50,15 @@ export default {
       default: undefined
     },
     bottom: {
-      type: String,
+      type: Number,
+      default: undefined
+    },
+    offsetBottom: {
+      type: Number,
+      default: undefined
+    },
+    offsetTop: {
+      type: Number,
       default: undefined
     }
   }