position a fixed element relative to a containing element

Question

Here is what I got so far.

This effect is exactly what I want, except the position is obviously off.

CSS:

#rightDiv{
    position: absolute;
    top: 200px;
    margin-left: 530px;
    }

#membership{
    text-align: center;
    height: 400px;
    z-index: 5;
    width: 329px;
    position: absolute;
    top: 190px; 
    }
#membership.fixed {
    position: fixed;
    right:180px;
    top: 10px;
    }

HTML:

<div id="rightDiv">
  <div id="videoStuff"></div>
  <div id="membership">
  <!--text for membership div -->
  </div>
</div>

As you can see, the little membership div on the right is stuck to the right-side of the view port. When you expand the window, the div follows with.

If you scroll down you can view the effect I am trying to achieve. I am attempting to make the little div on the right with the signup form scroll with the scrollbar. I have a script that applies "position: fixed" when the element is below the scrollbar.

I am trying to either...

1) position fixed element relative to it's container. This just seems like a clean way to solve this problem. Although it appears it is not possible with css alone.

-Is there a way to line up this fixed element with a jQuery script? How do I get the coordinates of the left side of the containing element?

2) Come up with a different way to achieve this effect. I have done some-what extensive research into this and this is the best I got...

jQuery:

$(function () {
    var msie6 = $.browser == 'msie' && $.browser.version < 7;

    if (!msie6) {
        if($('div#membership').css('margin-top')){
            var top = $('#membership').offset().top - parseFloat($('#membership').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
                    $('#membership').addClass('fixed');
                    $('$membership').css("right", right);
                  } else {
                    // otherwise remove it
                    $('#membership').removeClass('fixed');
                  }
            });
        }
    }
    return;
});

Answer 1

Try taking a look at http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another