position: sticky实现图片滚动吸附顶部失效问题求助

你的问题出在flex布局的默认拉伸行为以及sticky元素的触发条件上，以下是修复方案：

核心原因 #

• .player-about-content作为flex容器，默认的align-items: stretch会让图片容器（.player-about-content-img）被拉伸至和文本容器等高，导致sticky元素没有“滚动出”父容器的空间，无法触发吸附效果。
• 父元素的position: relative并不是问题，sticky可以在relative父元素中正常工作。

修复后的CSS代码 #

.player-about {
    padding-top: 26px;
    padding-bottom: 96px;
    height: 1000px;
}
.player-about-content {
    padding-top: 34px;
    border-top: 1px solid #98a2b3;
    position: relative;
    display: flex;
    align-items: flex-start; /* 关键：取消flex项的拉伸 */
}

.player-about-content-text {
    width: 55%;
}
p {
    text-align: justify;
}
.player-about-content-img {
    position: sticky;
    top: 0;
    width: 45%;
    display: flex;
    justify-content: flex-end;
}

额外说明 #

• 添加align-items: flex-start后，图片容器的高度由自身内容决定，当页面滚动时，它会在.player-about这个section的范围内保持吸附在顶部，直到section完全滚出视口。
• 若希望图片在section内部滚动时保持吸附，直到文本部分完全滚动完毕，可以移除.player-about的固定height:1000px，让section高度由内容撑开，这样sticky会在文本滚动期间保持吸附，直到section结束。

内容的提问来源于stack exchange，提问作者Rahil Ali