fix(IndexBar): incorrect anchor position when anchor doesn't have a parent node (#5429)

src/index-anchor/index.js

@@ -14,8 +14,9 @@ export default createComponent({
   data() {
     return {
       top: 0,
-      active: false,
-      position: 'static'
+      left: null,
+      width: null,
+      active: false
     };
   },
 
@@ -27,10 +28,11 @@ export default createComponent({
     anchorStyle() {
       if (this.sticky) {
         return {
-          position: this.position,
           zIndex: `${this.parent.zIndex}`,
+          left: this.left ? `${this.left}px` : null,
+          width: this.width ? `${this.width}px` : null,
           transform: `translate3d(0, ${this.top}px, 0)`,
-          color: this.parent.highlightColor,
+          color: this.parent.highlightColor
         };
       }
     }

src/index-anchor/index.less

@@ -1,6 +1,7 @@
 @import '../style/var';
 
 .van-index-anchor {
+  box-sizing: border-box;
   padding: @index-anchor-padding;
   color: @index-anchor-text-color;
   font-weight: @index-anchor-font-weight;

src/index-bar/index.js

@@ -19,7 +19,7 @@ export default createComponent({
   mixins: [
     TouchMixin,
     ParentMixin('vanIndexBar'),
-    BindEventMixin(function (bind) {
+    BindEventMixin(function(bind) {
       if (!this.scroller) {
         this.scroller = getScrollEventTarget(this.$el);
       }
@@ -102,28 +102,27 @@ export default createComponent({
       this.activeAnchorIndex = this.indexList[active];
 
       if (this.sticky) {
-        let activeItemTop = 0;
-        let isReachEdge = false;
-
-        if (active !== -1) {
-          activeItemTop = rects[active].top - scrollTop - this.stickyOffsetTop;
-          isReachEdge = activeItemTop <= 0;
-        }
-
         this.children.forEach((item, index) => {
+          if (index === active || index === active - 1) {
+            const rect = item.$el.getBoundingClientRect();
+            item.left = rect.left;
+            item.width = rect.width;
+          } else {
+            item.left = null;
+            item.width = null;
+          }
+
           if (index === active) {
             item.active = true;
-            item.position = isReachEdge ? 'fixed' : 'relative';
-            item.top = isReachEdge
-              ? this.stickyOffsetTop + scrollerRect.top
-              : 0;
+            item.top =
+              Math.max(this.stickyOffsetTop, rects[index].top - scrollTop) +
+              scrollerRect.top;
           } else if (index === active - 1) {
-            item.active = !isReachEdge;
-            item.position = 'relative';
-            item.top = item.$el.parentElement.offsetHeight - item.height;
+            const activeItemTop = rects[active].top - scrollTop;
+            item.active = activeItemTop > 0;
+            item.top = activeItemTop + scrollerRect.top - item.height;
           } else {
             item.active = false;
-            item.position = 'static';
           }
         });
       }
@@ -133,7 +132,7 @@ export default createComponent({
       const { scroller } = this;
       let scrollerRect = {
         top: 0,
-        left: 0,
+        left: 0
       };
 
       if (scroller.getBoundingClientRect) {

src/index-bar/test/__snapshots__/index.spec.js.snap

@@ -34,10 +34,10 @@ exports[`scroll and update active anchor 2`] = `
 <div class="van-index-bar">
   <div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index" style="">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
   <div data-index="0" style="height: 10px;">
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="position: relative; z-index: 1; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">1</div>
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: 1; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">1</div>
   </div>
   <div data-index="1" style="height: 10px;">
-    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="position: relative; z-index: 1; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">2</div>
+    <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: 1; transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96);">2</div>
   </div>
   <div data-index="2">
     <div class="van-index-anchor">3</div>