Datatables fixed header is not being recognized after it's been added, removed and then re-added to DOM

Question

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.

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.

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.

When you scroll back up to the top the fixed header is removed from the DOM and it disappears. This is the desired behavior.

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.

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.

$(function()
{
    //top scrollbar added above table
    $(topScrollbarWrapper).scroll(function()
    {
        $(datatablesWrapperMiddle).scrollLeft($(topScrollbarWrapper).scrollLeft());
        $(".dtfh-floatingparent").scrollLeft($(topScrollbarWrapper).scrollLeft());
    });

    //the datatables container scrollbar
    $(datatablesWrapperMiddle).scroll(function()
    {
        $(topScrollbarWrapper).scrollLeft($(datatablesWrapperMiddle).scrollLeft());
        $(".dtfh-floatingparent").scrollLeft($(datatablesWrapperMiddle).scrollLeft());
    });

    //the fixed header scrollbar
    $(".dtfh-floatingparent").scroll(function()
    {
        $(datatablesWrapperMiddle).scrollLeft($(".dtfh-floatingparent").scrollLeft());
        $(topScrollbarWrapper).scrollLeft($(".dtfh-floatingparent").scrollLeft());
    });
});

I have also tried using something like this, but it does not work either.

$(".dtfh-floatingparent").bind("scroll",function()
{
    $(datatablesWrapperMiddle).scrollLeft($(".dtfh-floatingparent").scrollLeft());
    $(topScrollbarWrapper).scrollLeft($(".dtfh-floatingparent").scrollLeft());
});

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.

EDIT

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.

My function call from the local copy of the dataTables.fixedHeader.min.js:

//update fixed header variable and scrolling
function checkFH()
{
    datatablesFixedHeader = $(".dtfh-floatingparent");

    $(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());
        });
    });
}