diff --git a/src/index-anchor/index.js b/src/index-anchor/index.js index f78637eaf..cb2b9bd7a 100644 --- a/src/index-anchor/index.js +++ b/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 }; } } diff --git a/src/index-anchor/index.less b/src/index-anchor/index.less index 5cedd7612..cdc7a0b26 100644 --- a/src/index-anchor/index.less +++ b/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; diff --git a/src/index-bar/index.js b/src/index-bar/index.js index a1136b45b..2085467d1 100644 --- a/src/index-bar/index.js +++ b/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) { diff --git a/src/index-bar/test/__snapshots__/index.spec.js.snap b/src/index-bar/test/__snapshots__/index.spec.js.snap index f18d2c546..81a0d7029 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`] = `