image to have position at bottom of div but remain fixed after scrolling

I think I have seen this before but what Im after is this:

I have two divs side by side. Both are variable length depending on user choices. Basically all I want is to have a logo appear at the bottom of the left div. If the right div is longer and ends up scrolling past the left div, I want the logo that was at the bottom of the left div to fix itself at the top if the user scrolls beyond the bottom of the left div. I don开发者_StackOverflowt know if Im saying it right...but thats what I want! Any help is greatly appreciated!

If I get it right, you want something like this:

<div class="left">
    <div class="logo"></div>
</div>
<div class="right">

</div>

<script>
$('.right').scroll(
   function(){
    var logoOffset = $('.logo').offset();

    if(logoOffset.top < window.pageYOffset) 
     {$('.logo').css({'position':'fixed', 'top': '0'});}
    else 
     {$('.logo').css({'position':'absolute', 'bottom': '0'});}
   }
);
</script>

You're describing a "sticky footer".

• http://ryanfait.com/sticky-footer/
• http://www.cssstickyfooter.com/