如何在布局（容器）中修复div？

Question

我做了example。如何使绿色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应该被修复！

所以看起来应该是这样的：

当用户滚动网站时

Answer 1

只需将你的固定div更改为'绝对和相应位置，就像这样：

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

以下是上述代码的jsfiddle：http://jsfiddle.net/AndrewL32/uLa02c62/2/

Answer 2

请注意，这仅适用于特定尺寸。您将需要（大量）媒体查询和/或JavaScript / jQuery来使其适用于所有窗口大小。

您可以使用translateX重新定位div。

这是 #fixed div的CSS：

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

以下是更新后的JSFiddle