diff --git a/src/index-anchor/index.js b/src/index-anchor/index.js index d60fc11e6..f78637eaf 100644 --- a/src/index-anchor/index.js +++ b/src/index-anchor/index.js @@ -14,7 +14,8 @@ export default createComponent({ data() { return { top: 0, - active: false + active: false, + position: 'static' }; }, @@ -26,9 +27,10 @@ export default createComponent({ anchorStyle() { if (this.sticky) { return { + position: this.position, + zIndex: `${this.parent.zIndex}`, transform: `translate3d(0, ${this.top}px, 0)`, color: this.parent.highlightColor, - zIndex: `${this.parent.zIndex}` }; } } diff --git a/src/index-bar/index.js b/src/index-bar/index.js index 38977318c..60e5e8e8d 100644 --- a/src/index-bar/index.js +++ b/src/index-bar/index.js @@ -96,16 +96,28 @@ 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; + isReachEdge = activeItemTop <= 0; + } + this.children.forEach((item, index) => { if (index === active) { item.active = true; - item.top = Math.max(this.stickyOffsetTop, rects[index].top - scrollTop) + scrollerRect.top; + item.position = isReachEdge ? 'fixed' : 'relative'; + item.top = isReachEdge + ? this.stickyOffsetTop + scrollerRect.top + : 0; } else if (index === active - 1) { - const activeItemTop = rects[active].top - scrollTop; - item.active = activeItemTop > 0; - item.top = activeItemTop + scrollerRect.top - item.height; + item.active = !isReachEdge; + item.position = 'relative'; + item.top = item.$el.parentElement.offsetHeight - item.height; } else { item.active = false; + item.position = 'static'; } }); } diff --git a/src/index-bar/test/__snapshots__/index.spec.js.snap b/src/index-bar/test/__snapshots__/index.spec.js.snap index f8d487743..a7f71a681 100644 --- a/src/index-bar/test/__snapshots__/index.spec.js.snap +++ b/src/index-bar/test/__snapshots__/index.spec.js.snap @@ -34,10 +34,10 @@ exports[`scroll and update active anchor 2`] = `
ABCDEFGHIJKLMNOPQRSTUVWXYZ
-
1
+
1
-
2
+
2
3