Bottom floating div inside a container (like in Facebook messages) - Take 2

I need to have a floating div inside a container. When I move the scroll bars it should move accordingly INSIDE a specified container div. I found something similar here: http://www.mkyong.com/jquery/mashable-floating-effect-example-with-jquery/ except in my case it needs to be floated inside another div/container AND it should stick to the bottom of the page. So for example, when I scroll from bottom to top the floated div should not move up until the bottom of the browser window "touches" it, Then it should start moving until I reach the top of the container div's top.

I found another example here: Spotlight: Constrained Stickies with jQuery but this also starts the floater at the TOP of the containing element. not sure how to modify it.

Here is what i have so far: http://jsfiddle.net/CCpJg/25/

thanks

Here is the solutions by William Niu: (link below)

Html:

<div id="page">
    <div id="header"><h1>header</h1></div>

    <div id="body">
        <h1>content top -> when scrolling up the box should STOP here (at the line right above this text)</h1>

        <div id="floating-box"></div>
        <span style="position: absolute; bottom: 0; ">content bottom -> when scrolling down the box should STOP here (at the line right below this text)</span>

    </div>
    <div id="footer"><h1>footer</h1></div>
    <div id="debug"></div>
</div>

CSS:

#floating-box{
    width:90px;
    height:200px;
    border:1px solid red;
    background-color:#BBBBBB;
    position:absolute;
    bottom: 0;
    z-index:1;
}

#page{
    width:800px;
    margin:0 auto;
}
#header{
    border:1px solid blue;
    height:1010px;
    margin:8px;
}
#body{
    border:1px solid blue;
    height:540px;
    margin:8px;
    position: relative;
}
#footer{
    border:1px solid blue;
    height:1500px;
    margin:8px;
}
h1,h2{
    padding:16px;
}

#debug {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 100px;
    width: 100px;
    color: red;
}

jQuery:

var windowHeight = $(window).height();

var $box = $('#floating-box');
var $parent = $('#body');
var parentAbsoluteTop = $parent.offset().top;
var parentAbsoluteBottom = parentAbsoluteTop + $parent.height();
var topStop = parentAbsoluteTop + $box.height();

$(window).s开发者_如何学Pythoncroll(function(event) {
    var windowBottom = $(window).scrollTop() + windowHeight;

    if (windowBottom < topStop)
        $box.css({
            position: 'absolute',
            top: '0px',
            bottom: 'auto'
        });
    else if (windowBottom >= topStop && windowBottom <= parentAbsoluteBottom)
        $box.css({
            position: 'fixed',
            top: 'auto',
            bottom: '0px'
        });
    else
        $box.css({
            position: 'absolute',
            top: 'auto',
            bottom: '0px'
        });
});

Take a look at this demo modified from the one you provided: http://jsfiddle.net/CCpJg/32/

EDIT: http://jsfiddle.net/CCpJg/40/