Getting fixed headers to stay inside container w/ jquery

I'm trying to get a div to get fixed positioning when it's parent gets to the top of the window, and lose it when it hits the bottom... for some reason, i can get it to get the fixed positioning, but not lose it. been at this for awhile and i just cant figure it out...

Here is my code so far. Can anyone see something I'm missing or screwed up on?

    $(window).bind('scroll',function(event) {
    $('.posthead').each(function(e) {
        var y = $(window).scrollTop();
        var windowHeightS = $('body').height();

        var postheadh = $(this).height() + 30;
        var top = $(this).offset().top - parseFloat($(this).css('margin-top').replace('auto', 0));

        var postheight = $(this).parent('.type-post').height();
        var windowHeight = windowHeightS - top;

        //var top = getposition.top;

        var postTop = top - y;
        var postBottom = postheight + top - y;


        $(this).parent('.开发者_JS百科type-post').children('.debug').html('Position from top: <span>' + y + "</span> bottom: <span>" + postBottom + "</span>");


        if(postTop <= 0) { $(this).addClass('fixed'); }
        else if(postTop >= 0) { $(this).removeClass('fixed'); }

        if(postBottom <= 0) { $(this).removeClass('fixed'); }       
    });
});

I don't exactly know what sort of craziness you want to do but I have make a div that jumps back to the top after reaching the bottom of the page based on your code. Hopefully that is exactly what you were trying to achieve.

I have commented your code so you may possibly figure out the problem for yourself as well.

This is the test page that I created. I have also sort of color coded things to make things easier to understand.

http://www.ferociouscoder.com/test.html

<style type="text/css">
html {
    background-color:#FFF;
    height:100%;
}
body {
    background-color:#CCC;
    height:1600px;
}
.posthead {
    background-color:#0FF;
    margin-top:auto;
}
.type-post {
    background-color:#FF0;
    height:500px;
}
.fixed {
    position:fixed;
    color:#F00;
}
</style>

<script>
$(window).bind('scroll',function(event) {
    $('.posthead').each(function(e) {
        var y = $(window).scrollTop(); //How much has the scrollbar on the right moved from the top.  Depends on size of scrollbar.
        var windowHeightS = $('body').height(); //600px;

        var postheadh = $(this).height() + 30; //postheadh = height of CHILD DIV + 30 (I don't know why this is so but ok)
        var top = $(this).offset().top;// - parseFloat($(this).css('margin-top').replace('auto', 0)); //How far is the child div away from the top of the page.


        var postheight = $(this).parent('.type-post').height(); //Height of the parent div
        var windowHeight = windowHeightS - top; //How far away is the top of the parent div from the botom of the body tag

        //var top = getposition.top;

        var postTop = top - y; //Since the position of the parent div is fixed.  This never changes.  It will be the value of the top margin of the body tag.
        var postBottom = postheight + top - y; //Since the position of the parent div is fixed.  This also never changes.  It will be the value of the height of the parent div + the constant above.

        $(this).parent('.type-post').children('.debug').html('Position from top: ' + y + " bottom: " + (windowHeightS-postheight) + "");

        if(y >= 0) { $(this).parent().addClass('fixed');} //postTop never changes! What you need is y I presume. Also you want it to stay fixed until it reaches the bottom.

        //else if(y >= 0) { $(this).removeClass('fixed'); } I commented this because it removed fixed positioning as soon as you're not at teh top of the screen.  When it gets to the bottom it tries to remove class fixed again (But you've already done so!)

        if(y >= (windowHeightS - postheight)) { $(this).parent().removeClass('fixed');}//postBottom never changes! what you need to see is if you've scrolled more than (or equal) the height of the parent container
    });
});
</script>
</head>
<body>
    <div class="type-post"><br>
        PARENT DIV 'TYPE-POST'<br>
        <div class="posthead debug">
            CHILD DIV 'POSTHEAD'<br>
        </div>
    </div>
</body>
</html>