Fix table heading on top during scroll

Question

I am trying to fix table heading on top during Scroll. It is a Bootstrap theme and i don't want to use any plugin. I have tried with the below code. table heading fix is working with Scroll.

But it is leaving CSS when scrolling.

No custom CSS used from my side. only Bootstrap Stuff used.

HTML

<div class="table-responsive">
    <table class="table table-striped persist-area">
        <thead>
            <tr class="persist-header">
                <th>........
                </th>
                <th>........
                </th>
                <th>........
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>.....
            </tr>
            <tr>....
            </tr>
            <tr>....
            </tr>
        <tbody>
    </table>
</div>

JavaScript

 function UpdateTableHeaders() {
                var el             = $('.persist-area');
                   offset         = el.offset();
                   scrollTop      = $(window).scrollTop();
                   floatingHeader = $(".floatingHeader");

               if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
                   floatingHeader.css({
                    "visibility": "visible"
                   });

               } else {
                   floatingHeader.css({
                    "visibility": "hidden"
                   });      
               };

        }


        $(function() {
            var clonedHeaderRow;
            clonedHeaderRow = $(".persist-header");
            clonedHeaderRow
            .before(clonedHeaderRow.clone())
            .css({"width" : clonedHeaderRow.width()})
                .addClass("floatingHeader");

            if($(".persist-header").hasClass('floatingHeader')){
                $(".persist-header th").each(function() {
                    clonedHeaderRowTh = $(this);
                });
            }

            $(window).scroll(UpdateTableHeaders).trigger("scroll");

        });