divをdiv内でのみ修正するにはどうすればよいですか？

Question

私は長いスクロールページを持っています。そして、私は別のdiv内のdivだけを修正したい。

<div class="box" > 
    <div class="inbox1"> 
    menu 
    </div> 
    <div class="inbox2"> 
    text 
    </div> 
    <div style="clear:both"></div> 
</div> 

（このJsfiddleを参照してください）

私はページをスクロールするときに、緑色のボックスは常にビューのが、唯一の赤のボックス内でなければなりません。赤いボックスが上にスクロールすると、緑色のボックスは赤いボックスに残り、赤いボックスと共にスクロールします。

ですから、赤いボックスの内側にある緑色のボックスをローカルに修正したいと思います。

UPD：唯一の方法はJqueryプラグインstickyfillを使用するように見えます。ここに良い記事http://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042があります。 Paulie_Dのおかげでスティッキー

Answer 1

あなたが求めているものは完全にはっきりしていませんが、position:stickyは要件を満たすと思われます。

ページをスクロールすると、緑色のボックスは常に表示されるはずですが、赤色のボックス内にのみ表示されます。赤いボックスが上にスクロールすると、緑色のボックスは赤いボックスに残り、赤いボックスと共にスクロールします。

body { 
 
    height: 1000px; 
 
} 
 
.box { 
 
    border: 1px solid red; 
 
    margin-top: 40px; 
 
    position: relative; 
 
} 
 
.inbox1 { 
 
    border: 2px solid green; 
 
    position: sticky; 
 
    width: 100px; 
 
    top: 0; 
 
} 
 
.inbox2 { 
 
    border: 2px solid blue; 
 
    height: 500px; 
 
    width: 100px; 
 
    float: right; 
 
}

<div class="box"> 
 
    <div class="inbox1"> 
 
    menu 
 
    </div> 
 
    <div class="inbox2"> 
 
    text 
 
    </div> 
 
    <div style="clear:both"></div> 
 
</div>

Position:sticky @ MDN

ボックス位置が通常の流れ（これは通常のフローにおける位置と呼ばれている）に従って計算されます。次に、ボックスはそのフロールートおよび包含ブロックに対してオフセットされ、すべての場合（テーブル要素を含む）、次のボックスの位置には影響しません。ボックスBがぴったりと配置されると、Bがオフセットされていないかのように、次のボックスの位置が計算されます。表要素に対する 'position：sticky'の効果は 'position：relative'と同じです。

注：ブラウザのサポートは普遍的ではないため、JSポリフィルのようなフォールバックが必要な場合があります。私はjsFiddleであなたのシオマネキを更新

Answer 2

、後https://jsfiddle.net/ujh30rLa/3/

それを試してみてください変更

body{ 

} 
.inbox1{ 
    border:2px solid green; 
    float:left; 
    width:100px; 
    position:fixed 
}