How do I change an inner div to fixed after I scroll to the bottom of it?

Question

I have a div within a div and I want to make inner div absolute but upon scroll to the bottom it changes to a fixed div. Its a side bar right now, I want it to scroll with the middle until it is at the bottom of the div and then have it become fixed.

Any idea?

I tried messing with this code but I can't seem to figure it out:

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript">
        $(function() {
            var offset = $("#right_side_bar").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                document.getElementById("#right_side_bar").style.position = 'fixed';

                } else {

                };
            });
        });
    </script>

Image: http://i.stack.imgur.com/S2Nbi.png

So the above code doesn't work but here is a further explanation of the issue. I have a huge div called container. Then a right sidebar called "right_side_bar. The right_side_bar has more content than is showing so I want it to scroll with the container, but as soon as all of the content is shown in the right_side_bar (meaning the user has scrolled to the bottom) then I want it to stop scrolling with the page and just become fixed. If the scroll goes back to the top, then it should become absolute again. Let me know if this makes sense!

http://i.stack.imgur.com/S2Nbi.png

  #right_side_bar{
position:absolute;
margin-top:38px;
    width:272px;
    margin-left:722px;
    background-color:#FFF; /* D6E6F7 */
    height:100%;
    overflow:scroll;
    z-index: 0;
}

#container{

    width: 994px;
    /*height: 885px;*/

    background-color: #D6E6F7;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*padding-bottom: 30px;*/
}

Answer 1

Based on what you've asked I've created an outer div ( #outer ) and an inner div ( #inner ) and from what I understand you want the inner div do become fixed after it has been scrolled to the bottom.

in it's most primitive form i think i've done what you're asking (although i'm not 100% sure what the question is)

example: - http://jsfiddle.net/eQtrG/12/

html:

<div id="container">
 <!-- LOTS OF CONTENT -->
    <div id="right_side_bar">
      <!-- LOTS OF CONTENT -->
    </div>
 <!-- LOTS OF CONTENT -->
</div>

css:

#container { position: absolute; width: 100%; background: #CCC; }
#right_side_bar {position: absolute;width:100%; height: 100px; background: #FF0000; overflow-x: hidden; overflow-y scroll; margin:0px;z-index: 9999; top: 250px; }

​ jquery:

$("#container").scroll(function(){
  $("#right_side_bar").scrollTop($("#container").scrollTop());
});

$('#right_side_bar').bind('scroll', function() {
 if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
     $(this).css({position:'fixed', top: '60px'})
 }
         else
         {
         $(this).css({position:'absolute', top: '250px'})
         }
});
​

​ ​ ​

​