Creating a sometimes fixed position div, issue with JQ logic
<p>The idea:</p>

<p>I'm creating a div that will change to position:fixed once the top of the div touches the top of the browser window, so that the div appears to float. An example of this behavior and the code to make it work can be found here: <a href="http://www.bennadel.com/blog/1810-Creating-A-Sometimes-Fixed-Position-Element-With-jQuery.htm" rel="nofollow">Creating a sometimes fixed position element.</a> </p>

<p>The problem:</p>

<p>The site where I'm implementing this code has a pretty hefty footer on it, so the position: fixed div, if the browser window is short enough, will scroll over the footer. The ideal behavior would be for the position: fixed div to not scroll past the footer and to instead bottom out. I haven't gotten that far quite yet. Currently I'm doing a check for if the #fixie_container bottom is past the .footer_container top, if it is then I'm removing the position: fixed property from the #fixie_container by removing the .fixie_container_fixed class. This is causing problematic behavior though. Once the bottom of the #fixie_container is past the .footer_container top, the .fixie_container_fixed class is removed and then added rapidly causing the #fixie_container to flicker rapidly.</p>

<p>I obviously have a bug in my logic somewhere but, being new to JS/JQ, I'm not sure what it is. Any pointers would be greatly appreciated.</p>

<p>The HTML:</p>

<p>I have a page with a body and a small right column. The floating div is located at the bottom of the right column. When the top of the div hits the top of the viewtop, then the position: fixed attribute is applied.</p>

<pre><code>&lt;div id="fixie_placeholder"&gt;
    &lt;div id="fixie_container"&gt;
        THIS CONTENT WILL HOVER                    
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="footer_container"&gt;
    THIS IS THE FOOTER
&lt;/div&gt;
</code></pre>

<p>The CSS: </p>

<pre><code>#fixie_placeholder {
    position: relative;    
}
#fixie_container {
    z-index: 9999999;
    width: 300px;
}
div.fixie_container_fixed {
    position: fixed;
    top: 0;
}
</code></pre>

<p>The JQuery:</p>

<pre><code>&lt;script type="text/javascript"&gt;
jQuery(function($){

    var placeholder = $("#fixie_placeholder");
    var container = $("#fixie_container");
    var block = $(".footer_container");
    var view = $(window);

    view.bind("scroll resize", function(){

        var placeholderTop = placeholder.offset().top;
        var containerBottom = container.offset().top + container.height();
        var blockTop = block.offset().top;
        var viewTop = view.scrollTop();

        if ((viewTop &gt; placeholderTop) &amp;&amp; !container.is(".fixie_container_fixed") &amp;&amp; (containerBottom &lt; blockTop)){

            placeholder.height(placeholder.height());

            container.addClass("fixie_container_fixed");

        } 
        else if ((viewTop &lt;= placeholderTop) &amp;&amp; container.is(".fixie_container_fixed") || (containerBottom &gt;= blockTop)){

            placeholder.css("height", "auto");

            container.removeClass("fixie_container_fixed");

        }
    });

});
&lt;/script&gt;
</code></pre>
