title: Making my checkout cart a floating menu that appears when scrolling?
body: <p>How can I make my already existing checkout cart float/follow as i scroll (having the table minimized to save screen space and maximize when clicked if possible would be amazing)</p>
  
  <p>Also, if you could help me with making it magically appear at a certain point in the page, that would definitely be appreciated.</p>
  
  <p>Any help would be great!!!</p>
  
  <p>Current format: <a href="http://i265.photobucket.com/albums/ii208/dentyne_fire/untitled_zps88f72bf0.jpg" rel="nofollow">http://i265.photobucket.com/albums/ii208/dentyne_fire/untitled_zps88f72bf0.jpg</a></p>
  
  <p>Code goes as follows:</p>
  
  <p>Cart Div:</p>
  
  <pre><code>     &lt;div id="sidebar"&gt;
              &lt;h2&gt;Your Cart&lt;/h2&gt;
  
  
              &lt;!--Add a Div with the class "simpleCart_items" to show your shopping cart area.--&gt;
              &lt;div class="simpleCart_items" &gt;
              &lt;/div&gt;
  
  
              &lt;!--Here's the Links to Checkout and Empty Cart--&gt;
              &lt;a href="#" class="simpleCart_empty"&gt;&lt;font color="#f5d700"&gt;empty cart&lt;/font&gt;&lt;/a&gt;
              &lt;a href="#" class="simpleCart_checkout"&gt;Checkout&lt;/a&gt;
  
  
  
              &lt;!--Nothing below this has to do with simpleCart (js) functionality--&gt;
  
          &lt;!--End #sidebar--&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Cart CSS:</p>
  
  <pre><code>         &lt;style&gt;
  
      .cartHeaders,.totalRow{display:none;}
      .simpleCart_items{
          overflow-y:auto;
          overflow-x:hidden;
          height:324px;
          width:243px;
          margin-bottom:20px;
  
      }
      .itemContainer{
          clear:both;
          width:229px;
          padding:11px 0;
          font-size:11px;
      }
      .itemImage{
          float:left;
          width:60px;
      }
      .itemName{
          float:left;
          width:85px;
      }
      .itemPrice{
          float:left;
          width:85px;
          color:#418932;
      }
      .itemQuantity{
          float:left;
          width:33px;
          margin-top:-12px;
          vertical-align:middle;
      }
      .itemQuantity input{
          width:20px;
          border:1px solid #ccc;
          padding:3px 2px;
      }
  
      .itemTotal{
          float:left;
          color:#c23f26;
          margin-top:-6px
      }
  &lt;/style&gt;
  </code></pre>