fixed image within a container

What is the best way to make a div scroll along with the page?

The exact effect is utilized @ http://store.apple.com/ (on the checkout summary after a product is ad开发者_如何转开发ded to the cart)

edit: or this example - alas, it's not as smooth as i'd like it to be =/

---

In the second example, they are using jQuery to do this. Scroll event of window object is caught and the using the animate() function the position of div is changed dynamically.

---

This tutorial should help you: http://css-tricks.com/scrollfollow-sidebar/

---

jQuery saves the day... again!

CSS:

#wrapper {
  position: absolute;
  width: 200px;
}

#fancyDiv {
  position: absolute;
  top: 0;
}

#fancyDivt.fixed {
  position: fixed;
  top: 0;
}

html:

<div id="commentWrapper">
  <div id="comment">
    <p>some text</p>
  </div>
</div>

jQuery:

$(document).ready(function() {
    $(function () {
        var top = $('#fancyDiv').offset().top - parseFloat($('#fancyDiv').css('margin-top').replace(/auto/, 0));
        $(window).scroll(function (event) {
              // what the y position of the scroll is
              var y = $(this).scrollTop();

              // whether that's below the div
              if (y >= top) {
                // if so, ad the fixed class
                $('#fancyDiv').addClass('fixed');
              } else {
                // otherwise remove it
                $('#fancyDiv').removeClass('fixed');
              }
        });
    }
});