Affix demo doesn't work properly

[PeteAndersen]

Version

2.9.0

Environment

Chrome 56, Firefox 47

Reproduction link

https://ant.design/components/affix/

Steps to reproduce

1. Mouse over the "Container to scroll" demo
2. Scroll down inside the container.
3. Continue scrolling down after container reaches it's bottom causing the browser window to scroll down

Firefox does not automatically scroll the entire page when reaching the bottom of the container, but moving the mouse outside of the container and continuing to scroll down produces the same issue.

Additionally, the affixed component does not reposition itself on browser window resize. It will not move itself into the container until the container is visible again.

What is expected?

Affixed component should remain inside the container and scroll with the browser window

What is actually happening?

Affixed component stays affixed to the same position within the browser window

[benjycui]

Yep, it's a known issue #3938

And I don't think we need to fix it or can fix it perfectly.

[benjycui]

For this feature is just for special use case.

[GuillaumeLeclerc]

Is it possible to get an explanation about this issue. Most people on github do not speak english.

Thank you a lot

[wzp-coding]

给子元素直接设置position:sticky;也许能解决你的问题
sticky
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。
更多信息请前往MDN官网查看----position