Affix element if scroll reaches to its end
<p>Here is my HTML</p>

<pre><code>&lt;div class="container"&gt;
&lt;div style="float::left" class="left affix-form"&gt;&lt;/div&gt;
&lt;div style="float::left" class="right"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Now problem is initially left section and right section both doesn't fit to window view port. I mean I need to scroll down to see the end of both sections. But I want to affix left section when scroll reaches to its end and after that right section should keep scrolling. 
Here is my java script</p>

<pre><code>$(window).scroll(function () {
    isScrolledIntoView($('.affix-form'));
  });

  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = elem.offset().top;
    var elemBottom = elemTop + elem.height();        
    if ((elemBottom &lt;= docViewBottom) ) {
      elem.addClass('affix-bottom');
    }
    else {
      elem.removeClass('affix-bottom');
    }
</code></pre>

<p>above script adds affix-bottom class but doesn't remove affix-bottom if I scroll to the top.
I am not sure what am i doing wrong?</p>
