Javascript 在滚动期间将表格标题固定在顶部

我试图在滚动过程中修复顶部的表格标题。 这是一个引导主题，我不想使用任何插件。 我已尝试使用以下代码。表标题修复正在使用滚动

但它在滚动时会离开CSS

---

没有自定义CSS从我这边使用。只使用引导程序

HTML

JavaScript

---

没有自定义CSS从我这边使用。只使用引导程序，你试过了吗？对不起，这是我的错。。它是一个表标题，而不是导航。。问题已更新。它看起来和你问的完全一样。

<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>

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

        });