スクロールスワイプ内のdivを固定

Question

私は要素containerを持っていますが、はが静止している必要があります。その内部にfixがあります。これは、containerがオーバーフローしてスクロールするときに修正する必要があります。

例：

<div id="container" style="width: 850px; height: 200px; position: static;"> 
    <div id="fix"></div> 
    <div id="otherStuff" style="width: 2000px;"></div> 
</div> 

私はCSSでこれを行うことができますか？

Answer 1

オーバーフローさせたいコンテンツをoverflow-x: scrollの要素に置くことができ、#fix要素はそのまま残ります。

.overflow { 
 
    overflow-x: scroll; 
 
}

<div id="container" style="width: 850px; height: 200px; position: static;"> 
 
    <div id="fix">fix</div> 
 
    <div class="overflow"> 
 
    <div id="otherStuff" style="width: 2000px;">otherstuff</div> 
 
    </div> 
 
</div>