スクロールdiv内の固定位置

Question

私は400pxの高さを言うとdivを持っています。内容はずっと長いので、divはスクロール（y軸）することができます。 divの右側には、そのdiv内に固定位置を持つためにいくつかのボタンが必要です。

どうすればいいですか？ jQuery、CSS、何でも - 私は気にしません。

私はfixToを試してみましたが、これはうまくいかないようです - そして "use position：fixed、left/right - just margin"というCSSソリューション。それは正常に動作しますが、ページ自体がスクロールすると、ボタンもスクロールします。彼らは常にdiv内で固定しておく必要があります。

例コード：

<div class="container" style="width: 960px; height: 400px; position: relative;"> 
    <div class="buttons needToBeFixed"></div> 
    <div class="aLotOfContent" style="width: 2000px;"></div> 
</div> 

Answer 1

あなたのdivの内側にあるものに応じて、固定位置にdiv要素の外にオブジェクトを追加することができますか？あなたのdivがその内部のデータに依存している場合、javascriptはコンテンツ全体を集約して、全体に依存する必要なアクションを実行することができます。

Answer 2

ボタンを下に置き、margin-top：-400pxを使用して解決しました。

<div style="position: relative"> 
    <div class="container" style="height: 400px;"></div> 
    <div class="buttons" style="margin-top: -400px; position: absolute; right: 0;"></div> 
</div> 

と思われます。誰かがより良い解決策を持っていれば、彼らはもちろん歓迎です。すべてのあなたの答えをありがとう。

Answer 3

HTMLマークアップを変更し、相対的な位置のラッパー要素を使用できます。次に、position: absolute;を使用して、この親に対する要素のpostionningを行うことができます。

body { 
 
    width: 1500px; 
 
    height: 1500px; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
    width: 350px; 
 
    overflow: hidden; 
 
} 
 
#container { 
 
    height: 350px; 
 
    overflow-y: scroll; 
 
    border: solid #000 1px; 
 
} 
 
.sticky { 
 
    position: absolute; 
 
} 
 
.right { 
 
    right: 0; 
 
} 
 
.bottom { 
 
    bottom: 0; 
 
}

<div id="wrapper"> 
 
    <input type="button" value="Sticky button" class="sticky top" /> 
 
    <input type="button" value="Sticky button" class="sticky bottom left" /> 
 
    <input type="button" value="Sticky button" class="sticky right" /> 
 
    <input type="button" value="Sticky button" class="sticky bottom right" /> 
 
    <div id="container"> 
 
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
     has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     <br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
    </div> 
 
</div>