title: How to stick div in container when scroll
body: <p>i would like to achive this effect, when user scroll down <code>#cart</code> will stick on screen and stay in <code>div.container</code> only. Something like below. I try to use position fixed but when scroll down <code>#cart</code> cannot stick inside container div. Should i consider jQuery for this effect?</p>
  
  <p><img src="https://i.stack.imgur.com/yfnbC.png" alt="enter image description here"></p>
  
  <p>Html</p>
  
  <pre><code>&lt;header&gt;Header&lt;/header&gt;
  &lt;div id="container"&gt;
      &lt;div id="cart"&gt;Cart
          &lt;p&gt;1x MacBook Air&lt;/p&gt;
          &lt;p&gt;1x iPhone&lt;/p&gt;
          &lt;p&gt;1x iPod&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;footer&gt;Footer&lt;/footer&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>header {
     width: 400px;
     height: 100px;
     background-color: #ddd;
     margin: 0 auto;
  }
  #container {
    background-color: #aeaeae;
    height: 1000px;
    margin: 0 auto;
    position: relative;
    width: 400px;
  }
  #cart {
    border: 2px solid #000;
    position: absolute;
    right: 0;
    top: 100px;
    width: 100px;
  }
  footer {
     width: 400px;
     height: 100px;
     background-color: #ddd;
     margin: 0 auto;
  }
  </code></pre>
  
  <p>Demo <a href="http://jsfiddle.net/ruslyrossi/bsv0tuqq/" rel="nofollow noreferrer">jsfiddle</a></p>