Javascript 如何在布局（容器）中固定div？

我发了一封信。如何使那个绿色的div在容器中有固定的位置

<div class="container">
    <div class="row">
        <div class="col-xs-4">hey hou</div>
        <div class="col-xs-8">
            <div>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>

            <div id="fixed">This div should aligned to the left like yellow div and fixed</div>

        </div>
     </div>
</div>

嘿，侯
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本
文本

这个div应该像黄色div一样向左对齐并固定

请注意，并非所有元素都必须保持与现在相同的位置，绿色div应该是固定的

所以它应该是这样的：

当用户滚动站点时：

---

只需将固定div更改为“绝对”，并相应地如下所示：

#fixed {
    position: absolute;
    left: -300px;
    top: 100px;
    background: green;
    width: 100px;
}

---

这里有一个包含上述代码的JSFIDLE:

请注意，这只适用于特定维度。您需要（大量）的媒体查询和/或JavaScript/jQuery才能在所有窗口大小上运行

您可以使用

translateX

重新定位div

这是#fixed div的CSS：

---

这是更新后的

，但我希望该div是一个fixed@dontHaveName那么请更新你的问题，但我的回答与安德鲁的相同。@dontHaveName你的问题不清楚。用粗体字并不能使它变得更好……否决这个问题无助于你。它写得很清楚，应该固定在标题和正文中。@dontHaveName是否可以为期望的结果绘制一个小草图？干净的方法，但绿色框仍然以较小的尺寸从容器中断裂。元素不能具有

位置：fixed

，并且固定到容器上<代码>位置：固定的始终与视口相关。我想删除我的答案，因为它不适用于所有分辨率，但不可能，因为OP接受了答案…@paulie_d那么这就是我问题的正确答案，我想删除整个线程，但是我不能，如果你扩展解释你想要实现什么（以及为什么现有的答案不起作用），并添加一个javascript&Jquery标记，你可能会得到符合你要求的答案。这种效果是可能的…只是不使用纯CSS。

#fixed {
    position: fixed;
    top: 100px;
    background: green;
    width: 100px;
    transform: translateX(-265px);
}