Getting fixed headers to stay inside container w/ jquery
<p>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...</p>

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

<pre><code>    $(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('.type-post').children('.debug').html('Position from top: &lt;span&gt;' + y + "&lt;/span&gt; bottom: &lt;span&gt;" + postBottom + "&lt;/span&gt;");


        if(postTop &lt;= 0) { $(this).addClass('fixed'); }
        else if(postTop &gt;= 0) { $(this).removeClass('fixed'); }

        if(postBottom &lt;= 0) { $(this).removeClass('fixed'); }       
    });
});
</code></pre>
