改弹窗样式

frontend/views/finance/ticheng-jisuan.php

@@ -132,6 +132,7 @@ use \common\libs\MyLib;
             <div class="row">
                 <div class="col-md-12">
                     <table id="listTable">
+                    <table style="position:fixed;top:0;display:none;">
                         <thead class="bg-warning">
                         <tr>
                             <th data-field="state" data-checkbox="true"></th>
@@ -171,6 +172,7 @@ use \common\libs\MyLib;
                         </tr>
                         </thead>
                         </table>
+                    </table>
                 </div>
             </div>
         </div>
@@ -232,6 +234,46 @@ use \common\libs\MyLib;
                     refreshList();
                 }
             }, 'json');
+
+
+            // 先缓存两个元素
+                    var $tmain = $("#tMain");
+                    var $tScroll = $("#tScroll");
+
+                    // 标题相对于document的位置信息（即document的滚动条的偏移值达到这个数值的时候，表头将被遮盖掉）
+                    var pos = $tmain.offset().top + $tmain.find(">thead").height();
+
+
+                    $(document).scroll(function () {
+                        var dataScroll = $tScroll.data("scroll");
+                        dataScroll = dataScroll || false;
+
+
+                        // 当滚动到表头被完全遮盖的位置时
+                        if ($(this).scrollTop() >= pos) {
+                            // 要判断dataScroll是否为false，只有为false的时候，才显示
+                            if (!dataScroll) {
+                                $tScroll
+                                    .data("scroll", true)
+                                    .show()
+                                    .find("th").each(function () {
+                                        // 实时获取原数据表对应列的宽度
+                                        $(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
+                                    })
+                                ;
+                            }
+                        } else {
+
+                            // 同样，只有当dataScroll为true的时候，才隐藏，因为如果是false，它就已经是隐藏了的
+                            if (dataScroll) {
+                                $tScroll
+                                    .data("scroll", false)
+                                    .hide()
+                                ;
+                            }
+                        }
+                    });
+
         });
     });
 </script>