Dynamic Absolute Positioning with jQuery

October 7th, 2010

I had to build a website recently that used fixed positioning on most items except for a content area that scrolled. The fixed items (or absolutely positioned ones) still needed to shift when the page re-sized if content would roll to the next line. So I had to come up with a clever way to handle dynamic absolutely positioned elements. The following is what I came up with. It just loops through each child of the body. On each child, it finds the previous item (without a ‘skip’ class) and calculates that item’s top css attribute plus it’s height.

<script type=”text/javascript” charset=”utf-8″>
      var $this = jQuery(this);
      var $prev = jQuery(this).prevAll().not(‘.skip’).first();
      if($prev.length > 0){
          var newTop = $prev.outerHeight(true) + parseFloat($prev.css(‘top’));

Check out the demo:

Comments are closed.

Comments have been closed for this post. If you would like to ask a question or need help, please post in the forums.