fixed image within a container

Question

Hi,

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 added to the cart)

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

Answer 1

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.

Answer 2

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

Answer 3

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');
              }
        });
    }
});