diff --git a/components/affix/index.jsx b/components/affix/index.jsx index e35990c35..380042469 100644 --- a/components/affix/index.jsx +++ b/components/affix/index.jsx @@ -6,6 +6,7 @@ import omit from 'omit.js'; import getScroll from '../_util/getScroll'; import BaseMixin from '../_util/BaseMixin'; import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; +import { ConfigConsumerProps } from '../config-provider'; function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; @@ -54,6 +55,9 @@ const Affix = { name: 'AAffix', props: AffixProps, mixins: [BaseMixin], + inject: { + configProvider: { default: () => ({}) }, + }, data() { this.events = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load']; this.eventHandlers = {}; @@ -166,7 +170,8 @@ const Affix = { const targetRect = getTargetRect(targetNode); const targetInnerHeight = targetNode.innerHeight || targetNode.clientHeight; - if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) { + // ref: https://github.com/ant-design/ant-design/issues/13662 + if (scrollTop >= elemOffset.top - offsetTop && offsetMode.top) { // Fixed Top const width = `${elemOffset.width}px`; const top = `${targetRect.top + offsetTop}px`; @@ -181,7 +186,7 @@ const Affix = { height: `${elemSize.height}px`, }); } else if ( - scrollTop < elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight && + scrollTop <= elemOffset.top + elemSize.height + offsetBottom - targetInnerHeight && offsetMode.bottom ) { // Fixed Bottom @@ -240,8 +245,9 @@ const Affix = { render() { const { prefixCls, affixStyle, placeholderStyle, $slots, $props } = this; + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; const className = classNames({ - [prefixCls || 'ant-affix']: affixStyle, + [getPrefixCls('affix', prefixCls)]: affixStyle, }); const props = {