javascript - 如何使用具有 "position:fixed"元素的片段中的代码？我不能让它停留在我的 <div> 的高度内(父级)

Question

我正在尝试使用这个片段(与原始代码的链接):https://codepen.io/starkxx/pen/NdemEv

这是用一些内容编辑的片段(POC 的容器，删除了一些代码):

https://codepen.io/Demky/pen/EzNLVB

我找不到将 stem-wrapper 包含在他新 parent 高度内的解决方案；我认为问题出在这段代码中，但我找不到解决方案

<div class="stem-wrapper">
    <div class="stem"></div>
    <div class="stem-background"></div>
</div>

固定的 stem-wrapper 总是占据整个窗口的高度或消失，如果我试图给他一个position:absolute/相对/...

.stem-wrapper {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 50%;
}

我不允许为“top”设置一个静态值，因为我不知道代码段离顶部有多远

我尝试了什么:

• 我尝试构建一个父对象，这样我就可以在父对象上使用 position:relative 并在子对象上添加 position:absolute ，正如我在此处看到的那样: https://stackoverflow.com/a/20994123/9552861但我没能成功
• 试图玩位置/容器，但徒劳无功
• 我也尝试过使用 javascript，但没有取得任何进展

你们能给我一些关于如何找到解决方案的提示吗？

确定问题出在 CSS 上吗？

我是否应该继续尝试将此固定元素 转换为父(position:relative)/子(position:absolute)关系？还是我的方向不对？

如果我需要针对我的问题添加更多信息，请告诉我。 我将 css/html 代码放在 codepen 上以获得更好的可见性，但如果它对读者更好，我可以将其粘贴到此处。

问题截图:

我将代码段导出到另一个网站时出现的问题的屏幕截图(stem- 占据了整个页面)

编辑: 试图使问题更容易理解；

在修改后的代码段 ( this link from top ) 中:

• 我添加了一个容器(#timelineContainer with background-color:yellow )；

• 我希望“.steam-wrapper”和他的 child (.stem、.stem-background)不会超出黄色区域(用正确的颜色更新了屏幕截图)。

目标是将此 POC/片段包含到一个容器中，这样它就可以在这个沙箱之外工作而无需占用整个页面的高度

Answer 1

如果我明白你想要什么，你需要做的是:

body {
    background: @body-background;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    font-size: 15px;
    line-height: 26px;
    color: #B9CFD0;
    font-family: 'Roboto Slab', serif;
    /*overflow-x: hidden;
    overflow-y: scroll;*/
    overflow: hidden;
}
#timelineContainer {
    overflow: auto;
    height: 60%; /*any height you want the snippet to have*/
}
.container {
    height: 40%;
}

然后你必须稍微调整一下阀杆:

.stem-wrapper {
    position: fixed;
    top: 40%;
    bottom: 0px;
    left: calc(50% - 8px);
    max-height: 60%;
}

之后，您必须调整 JS 以适应新布局。因为滚动功能与正文相关，现在应该与#timelineContainer相关