title: Limiting Fixed THEAD on page scroll upto TABLE or Specific DIV height
body: <p>I am setting up a comparison table &amp; wanted to have fixed THEAD when user scrolls down since its a very long text.</p>
  
  <p>I found a solution to it here <a href="https://stackoverflow.com/a/9669008/1463443">https://stackoverflow.com/a/9669008/1463443</a>. It works as desired.</p>
  
  <p>However, since my page's footer is bulky - a further scroll down still shows the fixed THEAD beyond the table content.</p>
  
  <p>I want to limit this fixed THEAD up to this table height or preferably up to #CONTENT div id (should not be seen on #Footer) </p>
  
  <p>This is the code I am using</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>table.entries {width: 100%;border-spacing: 0px;margin:0;}
  table.entries thead.fixed {position:fixed;top:0;}
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>TableThing = function(params) {
  settings = {
      table: $('#table'),
      thead: []
  };
  
  this.fixThead = function() {
      // empty our array to begin with
      settings.thead = [];
      // loop over the first row of td's in &amp;lt;tbody&gt; and get the widths of individual &amp;lt;td&gt;'s
      $('tbody tr:eq(1) td', settings.table).each( function(i,v){
          settings.thead.push($(v).width());
      });
  
      // now loop over our array setting the widths we've got to the &amp;lt;th&gt;'s
      for(i=0;i&lt;settings.thead.length;i++) {
          $('thead th:eq('+i+')', settings.table).width(settings.thead[i]);
      }
  
      // here we attach to the scroll, adding the class 'fixed' to the &amp;lt;thead&gt; 
      $(window).scroll(function() {
          var windowTop = $(window).scrollTop();
  
          if (windowTop &gt; settings.table.offset().top) {
              $("thead", settings.table).addClass("fixed");
          }
          else {
              $("thead", settings.table).removeClass("fixed");
          }
      });
  }
  }
  $(function(){
  var table = new TableThing();
  table.fixThead();
  $(window).resize(function(){
      table.fixThead();
  });
  });
  </code></pre>
  
  <p></p>