滾動條下拉時 table 的thead 固定在網頁固定在頂部不動
阿新 • • 發佈：2019-01-12
一、效果圖
二、前端頁面
核心程式碼：
1、固定頂部
position:fixed;top:0pxOVERFLOW-X: scroll;width:720px;position: relative;bottom:30px;<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/WEB-INF/views/include/taglib.jsp" %> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <html> <head> <title>場地預定</title> </head> <style type="text/css"> .table-chang{margin-left: 0px;overflow: hidden;float: left;border-collapse: separate;border-spacing:5px} .table-chang th{width: 120px;min-width:120px;max-width:120px;height: 60px;font-weight: normal;text-align: center;color: #323232} .table-chang td{width: 120px;min-width:120px;max-width:120px;height: 60px;background: #FFF;text-align: center;color: #fff;font-size: 20px;padding:0px;border: 1px solid #FFFFFF;} .table-chang td a{display: block;width: 100%;height: 100%;} .table-chang td.access{background: #FFF;color:#A62A04;border: 1px dashed #A62A04;} .table-chang td.unavailable{background: #F0F0F0;color:#C8C8C8} .table-chang td.unPayed{background: #F0860C;} .table-chang td div.unPayed{background: #F0860C;} .table-chang thead th{font-size: 22px;border:1px;background:transparent} .table-chang thead tr td .time_cell{width:30px;height:30px;text-align: center;color: #323232} .table-chang tbody tr td .time_cell {width:30px;height:30px;font-size:20px;color:#000;border:0px;background: transparent;} .table-chang tbody tr td .time_cell span{font-size:22px;float: right;} </style> <body> <div id="reserveStatus" style="OVERFLOW-X: scroll;width:720px;" align=center> <table class="table-chang"> <thead id="fieldThead" style="position:fixed;top:0px;margin-left:-5px;background-color: #ffffff"> <%--場地--%> <tr> <th></th> <c:forEach items="${venueFieldPriceList}" var="field" varStatus="status"> <th>${field.fieldName}</th> </c:forEach> </tr> <%--場地--%> </thead> <tbody> <div style="margin-top:60px;"> <%-- 遍歷所有場地開始--%> <c:forEach items="${times}" var="t"> <tr> <%-- 縱座標：時間--%> <td style="width: 30px;position: relative;bottom:30px;"> <span class="time_cell"> ${fn:substring(t, 0, 5)} </span> </td> <%-- 橫座標：場地狀態--%> <c:forEach items="${venueFieldPriceList}" var="field" varStatus="status"> <c:set var="status" value="0"/> <%--遍歷單個場地的時間、價格組成的Jason 獲得狀態--%> <c:forEach items="${field.timePriceList}" var="tp"> <%--場地jason的時間與橫座標的時間一致 --%> <j:if test="${t eq tp.time}"> <%--設定單個場地 時間T 的狀態--%> <c:set var="status" value="${tp.status}"/> <c:set var="price" value="${tp.price}"/> <%-- A場地 B時間 的狀態 結束--%> </j:if> </c:forEach> <%--設定td的class--%> <j:if test="${'0' eq status}"> <c:set var="tdClass" value="reserveTd access"/> </j:if> <j:if test="${!('0' eq status)}"> <c:set var="tdClass" value="reserveTd unavailable"/> </j:if> <%--設定td的class end--%> <%-- 場地 B時間 的狀態展示--%> <td status="${status}" class="${tdClass}" data-price="${price}" data-field-id="${field.fieldId}" data-field-name="${field.fieldName}" data-time="${t}" > <j:if test="${'0' eq status}"> ¥ ${price} </j:if> <j:if test="${!('0' eq status)}"> <span>已預訂</span> </j:if> </td> <%-- A場地 B時間 的狀態展示 結束--%> </c:forEach> <%-- 橫座標：時間 結束--%> </tr> <%-- 縱座標：場地 結束--%> </c:forEach> </div> <%-- 遍歷所有全場 場地結束--%> </tbody> </table> </div> <div class="row" style="display: none"> <div id="unPayed" class="row"> </div> <form id="orderForm"> <input name="consDate" value="${consDate}" type="hidden"> <input name="reserveVenueId" value="${venueId}" type="hidden"> <%--<span id="reserve_submit"><a class="btn btn-success col-sm-10" style="height: 80px;width:100%;font-size: 50px;line-height: 80px;" onclick="filedSelectJson()">提交</a></span>--%> </form> </div> <script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.js"></script> <script> document.write("<script type='text/javascript' src='${ctxStatic}/modules/reserve/js/reserve_app_field.js?t=" + Math.random() + "'><\/script>"); </script> </body> </html>
三、當頁面左右滑動時，thead也做出相應的移動
$(document).ready(function () {
$("#reserveStatus").scroll(function () {
var scrollLeft=$("#reserveStatus").scrollLeft();
var margin_left=Number(-5)-Number(scrollLeft);
$("#fieldThead").css({"margin-left":margin_left});
});
}