title: table needs to be fixed during scrolling with clicking on a tag
body: <p>I have some problem with my scrolling.
  I have 3 tables and one of them I want to be fix after scroll more then specific distance</p>
  
  <pre><code>var $table = $("#thead"),
  $window = $(window),
  distance = $table.offset().top;
  text=$("div.text2"),
  textdistance=text.offset().top;
  
  $window.scroll(function () {
  var wdistance = $window.scrollTop();
  
   if (wdistance &gt; distance) {
      if( wdistance &lt; textdistance )
      {table.addClass('fixed');}
      else {
      table.removeClass('fixed');
      }
    }else{
      table.removeClass('fixed'); 
   }
  </code></pre>
  
  <p>});</p>
  
  <p>this is my first demo <strong><a href="http://jsfiddle.net/mkafiyan/HmFW7/6/" rel="nofollow">jsfiddle</a></strong> </p>
  
  <p>I want to say when this "if" is correct then position of div with "thead" id become fixed on top of the other tables when scrolling the page. and after the div with id "first" is finish then <code>&lt;div id="thead"&gt;&lt;/div&gt;</code> come back to previous place. 
  and also another problem after clicking on more details because of the css that div with "more-detail" id get  <code>display:block, display:none,</code> ,the table with id "thead" scrolling both when clicking on more details or not.</p>
  
  <p>this is my second demo <strong><a href="http://jsfiddle.net/mkafiyan/HmFW7/7/" rel="nofollow">demo</a></strong>  </p>