在滚动期间修复表格标题

Question

我正在尝试在Scroll期间修复表格标题。 这是一个Bootstrap主题，我不想使用任何插件。 我尝试过以下代码。表标题修复正在使用Scroll。

但滚动时它会离开CSS。

我这边没有使用自定义CSS。只使用Bootstrap Stuff。

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");

        });