时间戳

首页 > 解决方案 > 如何使用具有“位置：固定”元素的片段中的代码？我不能让它留在我的

的身高（父母）

javascript - 如何使用具有“位置：固定”元素的片段中的代码？我不能让它留在我的
的身高（父母）

问题描述

我正在尝试使用此代码段（带有原始代码的链接）：https ://codepen.io/starkxx/pen/NdemEv

这是用一些内容编辑的片段（POC 的容器，删除了一些代码）：

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

我没有找到将茎包装包含在他的新父母身高内的解决方案；我认为问题出在这段代码中，但我找不到解决方案

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

如果我试图给他一个位置，固定的茎包装器总是占据整个窗户的高度或消失：绝对/相对/...

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

我不允许为“顶部”设置静态值，因为我不知道片段离顶部有多远

我尝试了什么：

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

确定问题出在 CSS 上吗？

我是否应该继续尝试将此固定元素转换为父（位置：相对）/子（位置：绝对）关系？还是我没有朝着正确的方向寻找？

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

问题截图： 问题截图

当我将片段导出到另一个网站时出现问题的屏幕截图（主干——占据整个页面） 问题截图

编辑：试图让问题更容易理解；

在修改后的片段中（此链接来自顶部）：

目标是将此 POC/Snippet 包含在容器中所以它可以在这个沙箱之外工作而不占用整个页面的高度

标签： javascripthtmlcss

解决方案

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

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 以适应新布局。因为滚动功能是和body相关的，现在应该和#timelineContainer相关

推荐阅读