jquery - 数据表固定标题扩展从正确位置移动的问题

Question

我在同时使用数据表和固定标题扩展时遇到了问题。当浮动 div 与固定表头交互导致固定表头远离表头并显示表头两次时，就会出现问题。

这看起来像是页面中的一个小故障，尽管一旦用户再次滚动鼠标它就会自行纠正。

带按钮的 div 代码：

<div id="container_btn_float" class="btnContainer" style="position:fixed; z-index:110; top:50px" >
                    <div class="row">
                        <div class="form-group col-md-12">
                            <!--<label class="">Approve &nbsp &nbsp</label>-->
                            <input type="button" class="btn btn-info" id="btn_ApproveSelected" value="Approve">
                        <input type="button" class="btn btn-success" id="btn_ApproveAll" value="Approve All">
                        <input type="button" class="btn btn-danger" id="btn_UnApproveSelected" value="Decline">
                        <input type="button" class="btn btn-primary" id="btn_ExpandAll" value="Expand All" onclick="expandAll()">
                        <input type="button" class="btn btn-warning" id="btn_ContractAll" value="Contract All" onclick="contractAll()">
                        <!--<input type="button" class="btn btn-warning" id="btn_UnApproveAll" value="All">-->

                    </div>

                   iv>
            </div>

数据表的代码是：

    new $.fn.dataTable.FixedHeader(summaryTable, {
    });

滚动时固定 div 的代码（带按钮）：

        jQuery(function($) {
          function fixDiv() {
           var $cache = $('#getFixed');
        if ($(window).scrollTop() > 100)
           $cache.css({
           'position': 'fixed',
           'top': '10px'
      });
      else
        $cache.css({
          'position': 'relative',
          'top': 'auto'
         });
       }

      $(window).scroll(fixDiv);
      fixDiv();
    });

Answer 1

我添加了第二个 div 容器，其按钮与其他按钮相同，但我将其显示设置为 none 并给它一些 css，以便它具有与包含 div 的 div 相同的大小，这些 div 最终会移动并在其中留出空间最初放置。

          <div class="form-group col-md-4" id="container2_btn_stay" style="height:76px;width:90px">
                  <!--Just some hidden text-->
                  <input type="button" class="btn btn-warning" id="btn_HiddenBox" value="HiddenBox" style="display:none">
          </div>