Dynamic Div - Tracking Page Scroll Bar

Question

I have a div which is in the second column of the page and I wanted it to become "dynamic", I mean, it followed the scrolling of the page, but even with researches, I could not get anything that could help me.

Code of the div:

<div class="col-2 onestep">
            <!-- RESUMO DA COMPRA -->
            <div class="cart-resume">
                <?php 
                    //Subtotal do cart
                    $subtotal = Mage::getSingleton('checkout/session')->getQuote()->getSubtotal();
                    //Total do cart
                    $total = Mage::helper('checkout/cart')->getQuote()->getGrandTotal();

                    //Formata o subtotal e total
                    $subtotal_formatado = Mage::helper('core')->currency($subtotal,true,false);
                    $total_formatado = Mage::helper('core')->currency($total,true,false);

                    //Calcula o preço da parcela em 2x e já formata
                    $parcela = Mage::helper('core')->currency(($total/2),true, false);
                ?>    
                <div>
                    <h4>RESUMO DE COMPRA</h4>
                </div>
                <div class="item-resume-cart">
                    <span style="font-weight: 300" class="name-item-cart"><?php echo Mage::getSingleton('core/session')->getDataCompra();?></span>
                    <span class="totalCompra"><strong><?php echo $total_formatado;?></strong></span>
                    <span class="totalCompra2" style="display: none;"><strong></strong></span>
                </div>
                <div class="resume-cart-totals">
                    <label>
                    <span style="font-weight: 300; text-align: center;font-size: 16px;color: #345a4c;font-family: 'CoHeadlineCorp-Light';">
                        Total: 
                    </span>
                    <span class="price onestep">
                    <?php echo $total_formatado;?>
                    </span>
                    <span class="price onestep2" style="display: none;"></span>
                    </label>
                    <div class="parcel">
                        2x de <?php echo $parcela;?>
                    </div>
                    <div class="parcel2" style="display: none;"></div>
                </div>
            </div>
          </div>

Answer 1

I found an answer to a similar question right here in Stackoverflow. The dicussion on the subject can be found at:

https://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to

And the demonstration of the operation together with the source code can be found at:

http://fiddle.jshell.net/34df1mj7/show/light/