title: Datatables fixed header is not being recognized after it's been added, removed and then re-added to DOM
body: <p>I am using Datatables for a very large and extensive table that needs to scroll horizontally. I am using FixedHeader in my table initialization so I can always see the table header information/columns.</p>
  <p>I have three different scroll-x scrollbars. One above and outside of the datatable container, one in the datable fixed header, and one at the bottom of the datatable container.</p>
  <p>When you scroll down far enough the fixed header is added to the DOM and it appears and the scroll-x of the fixed header updates the scroll-x of the datatable container just fine. This is the desired behavior.</p>
  <p>When you scroll back up to the top the fixed header is removed from the DOM and it disappears. This is the desired behavior.</p>
  <p>When you scroll back down again the fixed header is re-added to the DOM again, but the scroll-x of the fixed header does not update the scroll-x of the datatable container.</p>
  <p>Here is my jquery code. I have the first two scrolling elements set up as jquery variables, but finding the third fixed header element since it doesn't always exist in the DOM.</p>
  <pre><code>$(function()
  {
      //top scrollbar added above table
      $(topScrollbarWrapper).scroll(function()
      {
          $(datatablesWrapperMiddle).scrollLeft($(topScrollbarWrapper).scrollLeft());
          $(&quot;.dtfh-floatingparent&quot;).scrollLeft($(topScrollbarWrapper).scrollLeft());
      });
  
      //the datatables container scrollbar
      $(datatablesWrapperMiddle).scroll(function()
      {
          $(topScrollbarWrapper).scrollLeft($(datatablesWrapperMiddle).scrollLeft());
          $(&quot;.dtfh-floatingparent&quot;).scrollLeft($(datatablesWrapperMiddle).scrollLeft());
      });
  
      //the fixed header scrollbar
      $(&quot;.dtfh-floatingparent&quot;).scroll(function()
      {
          $(datatablesWrapperMiddle).scrollLeft($(&quot;.dtfh-floatingparent&quot;).scrollLeft());
          $(topScrollbarWrapper).scrollLeft($(&quot;.dtfh-floatingparent&quot;).scrollLeft());
      });
  });
  </code></pre>
  <p>I have also tried using something like this, but it does not work either.</p>
  <pre><code>$(&quot;.dtfh-floatingparent&quot;).bind(&quot;scroll&quot;,function()
  {
      $(datatablesWrapperMiddle).scrollLeft($(&quot;.dtfh-floatingparent&quot;).scrollLeft());
      $(topScrollbarWrapper).scrollLeft($(&quot;.dtfh-floatingparent&quot;).scrollLeft());
  });
  </code></pre>
  <p>Is there something else I need to do after an element gets re-added to the DOM for an nth number of times? I have not been able to track down a solution yet. Any help would be greatly appreciated.</p>
  <p><strong>EDIT</strong></p>
  <p>I now have this working. I had to download and use a local version of dataTables.fixedHeader.min.js so that I could insert a function call to update my jquery variables when the fixed header element gets re-added to the DOM each time. Then in that function I am adding the code I have below and it's picking up the correct elements.</p>
  <p>My function call from the local copy of the dataTables.fixedHeader.min.js:</p>
  <pre><code>//update fixed header variable and scrolling
  function checkFH()
  {
      datatablesFixedHeader = $(&quot;.dtfh-floatingparent&quot;);
  
      $(topScrollbarWrapper).scrollLeft($(datatablesWrapperMiddle).scrollLeft());
      $(datatablesFixedHeader).scrollLeft($(datatablesWrapperMiddle).scrollLeft());
  
      //adjust all scrollbars
      $(function()
      {
          $(topScrollbarWrapper).scroll(function()
          {
              $(datatablesWrapperMiddle).scrollLeft($(topScrollbarWrapper).scrollLeft());
              $(datatablesFixedHeader).scrollLeft($(topScrollbarWrapper).scrollLeft());
          });
  
          $(datatablesWrapperMiddle).scroll(function()
          {
              $(topScrollbarWrapper).scrollLeft($(datatablesWrapperMiddle).scrollLeft());
              $(datatablesFixedHeader).scrollLeft($(datatablesWrapperMiddle).scrollLeft());
          });
  
          $(datatablesFixedHeader).scroll(function()
          {
              $(datatablesWrapperMiddle).scrollLeft($(datatablesFixedHeader).scrollLeft());
              $(topScrollbarWrapper).scrollLeft($(datatablesFixedHeader).scrollLeft());
          });
      });
  }
  </code></pre>