スクロール時にdivとその子を固定する

Question

ユーザーがスクロールすると、上のdivをどのように固定して下位のdivがその上を通過するのか？私は何がイメージの高さになるのか分からない。 http://codepen.io/anon/pen/oxOPXv

// Stays in position 
<div class="col-md-12 top-wrapper"> 
    <div class="container image-wrapper"> 
    <img src="http://placehold.it/750x550" /> 
    </div> 
</div> 

// moving up and over .top-wrapper (also other content below this) 
<div class="bottom-wrapper"> 
    <div class="container"> 
    <div class="col-md-3 sidebar"> 
     <p>Lorem</p> 
    </div> 
    <div class="col-md-9 main-div"> 
     <p>Lorem</p> 
    </div> 
    </div> 

</div> 

Answer 1

あなたのCSSの間違った "位置" を綴りました。あなたは最後の "私"を残しました。それは次のようになります。私はこれを正しく理解していた場合

.top-wrapper { 
    background-color: #eee; 
position: fixed; 
} 

Answer 2

、.top-wrapperは固定されており、あなたは他のすべてがアップし、.top-wrapper上でスクロールできるようにしたいです。あなたのdivが大きくなる原因となるコンテンツが不十分なので、実際にその高さをスクロールするのに十分なスペースがありません。あなたはこれを行うことによって、あなたの垂直方向のスペースを増やすことができます

body { 
    height: 250vh; 
    overflow-y: auto; 
} 

CODEPEN

Answer 3

これは私が（すなわちposition: fixed; '）.top-ラッパー' だけでなく、固定http://codepen.io/anon/pen/dMLqdM

を?:ようにあなたが意味しますか、 'ヘッダー'を追加し、 '.top-wrapper'にはmargin-top: 50px;を付けてヘッダーの下に配置します。 （さらにスクロールをより明確にするために、下のラッパーにいくつかのコンテンツを追加しました）