Question

我在使用datatables和fixed-header entension时遇到了麻烦。当浮动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>

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

1 个答案: