修复了地平线滚动时标题标题的问题

时间：2018-07-03 09:04:27

标签： javascript header fixed

我用js写了一个自定义表来制作固定的标题，但是出现了问题，当水平滚动条向右滚动时，之后我无法单击链接作为设计。

请访问https://jsfiddle.net/zu8xcfhb/14/了解更多详情。

任何人都需要帮助，这使我一周了，但现在我仍然无法解决问题。

$(document).ready(function() {
  // empty table
  $(".table7S-fixed-header").empty();
  $(".table7S-fixed-footer").empty();
  $(".table7S-fixed-sidebar").empty();
  $(".table7S-fixed-sidebar-header").empty();
  $(".table7S-fixed-sidebar-footer").empty();


  $(".table7S").wrap('<div class="table7S-scroll"></div>');
  $(".table7S-scroll").wrap('<div class="table7S-container"></div>');


  // $(".table7S-container").append(
  // 	 '<div class="table7S-fixed-header"></div>'
  // 	,'<div class="table7S-fixed-footer"></div>'
  // 	,'<div class="table7S-fixed-sidebar"></div>'
  // 	,'<div class="table7S-fixed-sidebar-header"></div>'
  // 	,'<div class="table7S-fixed-sidebar-footer"></div>'
  // );

  $(".table7S:first").clone().appendTo(".table7S-fixed-header");
  $(".table7S:first").clone().appendTo(".table7S-fixed-footer");
  $(".table7S:first").clone().appendTo(".table7S-fixed-sidebar");
  $(".table7S:first").clone().appendTo(".table7S-fixed-sidebar-header");
  $(".table7S:first").clone().appendTo(".table7S-fixed-sidebar-footer");

  // var scroll_1, scroll_2;
  $(".table7S-scroll").scroll(function() {
    $(".table7S-fixed-header, .table7S-fixed-footer").scrollLeft($(this).scrollLeft());
    $(".table7S-fixed-sidebar").scrollTop($(this).scrollTop());

    // var left = $(this).scrollLeft();
    // var top =  $(this).scrollTop();


    // scroll_2 = scroll_1;
    // scroll_1 = top;
    // // scroll vertical
    // if(scroll_1 != scroll_2) {
    // 	$(".table7S-fixed-sidebar").removeClass("scroll-h");
    // // scroll horizontal
    // } else {
    // 	$(".table7S-fixed-sidebar").addClass("scroll-h");
    // }

  });

  if (navigator.userAgent.indexOf('Mac OS X') != -1) {
    $(".table7S-fixed-header, .table7S-fixed-footer, .table7S-fixed-sidebar, table7S-fixed-sidebar, .table7S-fixed-sidebar-header, .table7S-fixed-sidebar-footer").addClass("mac");
  } else {
    $(".table7S-fixed-header, .table7S-fixed-footer, .table7S-fixed-sidebar, table7S-fixed-sidebar, .table7S-fixed-sidebar-header, .table7S-fixed-sidebar-footer").addClass("pc");
  }
});



function Next() {
  var space = 100;
  var x = $(".table7S-scroll").scrollLeft();
  var w = $(".table7S-scroll").width();
  if (x <= w) {
    $(".table7S-scroll").scrollLeft(x + space);
    // console.log(x, w);
  }
}

function Prev() {
  var space = 100;
  var x = $(".table7S-scroll").scrollLeft();
  if (x > 0) {
    $(".table7S-scroll").scrollLeft(x - space);
  }
}

// if( $(".go-top") ) {
// 	var scrollTrigger = 100;
// 	var backToTop = function(){
// 		var scrollTop = $(window).scrollTop()
// 		if(scrollTop > scrollTrigger) {
// 			$(".go-top").addClass("go-top-show");
// 		} else {
// 			$(".go-top").removeClass("go-top-show");            
// 		}
// 	};
// 	backToTop();
// 	$(window).on("scroll", function(){
// 		backToTop();
// 	});
// 	$(".go-top").on("click", function(e){
// 		e.preventDefault();
// 		$("html, body").animate({
// 			scrollTop: 0,
// 		}, 700);
// 	});
// }

function Sort(value) {
  alert(value);
}

function test(value) {
  alert(value);
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.table7S-container {
  position: relative;
  overflow: hidden;
  max-width: 500px;
}

.table7S-container .table7S-scroll {
  overflow: auto;
  max-height: 300px;
}

.table7S-container .table7S {
  width: 100%;
  border-collapse: collapse;
}

.table7S-container .table7S thead {
  background-color: #728eb5;
  color: white;
}

.table7S-container .table7S thead tr th,
.table7S-container .table7S thead tr td {
  border: 1px solid #c7d2f2;
  padding: 10px;
}

.table7S-container .table7S thead tr th.cell-fixed,
.table7S-container .table7S thead tr td.cell-fixed {
  background-color: #b5c0d6;
  color: white;
}

.table7S-container .table7S thead tr th:after,
.table7S-container .table7S thead tr td:after {
  position: absolute;
  top: 0;
  padding: 10px;
  content: attr(data-column);
  display: block;
  opacity: 0;
}

.table7S-container .table7S tfoot tr th,
.table7S-container .table7S tfoot tr td {
  background-color: white;
  color: #343434;
  padding: 10px;
  border: 1px solid #c7d2f2;
  padding: 10px;
}

.table7S-container .table7S tfoot tr th.cell-fixed,
.table7S-container .table7S tfoot tr td.cell-fixed {
  background-color: #eee;
  color: #343434;
}

.table7S-container .table7S tfoot tr th.cell-fixed:hover,
.table7S-container .table7S tfoot tr td.cell-fixed:hover {
  cursor: pointer;
}

.table7S-container .table7S tbody {
  background-color: #edf0f5;
}

.table7S-container .table7S tbody tr td {
  padding: 5px 10px;
  border: 1px solid #c7d2f2;
}

.table7S-container .table7S tbody tr td.cell-fixed {
  background-color: #b5c0d6;
  color: white;
}

.table7S-container .table7S tbody tr td.cell-fixed:hover {
  cursor: pointer;
}

.table7S-container .table7S tbody tr td.data-column-top {
  position: relative;
}

.table7S-container .table7S tbody tr td.data-column-left {
  position: static;
}

.table7S-container .table7S tbody tr:nth-child(even) {
  background-color: #d6dce8;
}

.table7S-container .table7S tbody tr:nth-child(even) td.cell-fixed {
  background-color: #a5b2cd;
}

.table7S-container .table7S tbody tr:hover {
  background-color: #f9ea95;
}

.table7S-container .table7S-fixed-header,
.table7S-container .table7S-fixed-footer,
.table7S-container .table7S-fixed-sidebar,
.table7S-container .table7S-fixed-sidebar-header,
.table7S-container .table7S-fixed-sidebar-footer {
  position: absolute;
  left: 0;
  max-width: calc(100% - 17px);
  pointer-events: none;
  overflow: hidden;
}

.table7S-container .table7S-fixed-header.mac,
.table7S-container .table7S-fixed-footer.mac,
.table7S-container .table7S-fixed-sidebar.mac,
.table7S-container .table7S-fixed-sidebar-header.mac,
.table7S-container .table7S-fixed-sidebar-footer.mac {
  max-width: 100%;
}

.table7S-container .scroll-h {
  pointer-events: auto;
}

.table7S-container .table7S-fixed-header {
  top: 0;
}

.table7S-container .table7S-fixed-header table thead {
  visibility: visible;
}

.table7S-container .table7S-fixed-header table tbody,
.table7S-container .table7S-fixed-header table tfoot {
  visibility: hidden;
  pointer-events: none;
}

.table7S-container .table7S-fixed-footer {
  bottom: 17px;
}

.table7S-container .table7S-fixed-footer.mac {
  bottom: 0;
}

.table7S-container .table7S-fixed-footer table tfoot {
  visibility: visible;
}

.table7S-container .table7S-fixed-footer table thead,
.table7S-container .table7S-fixed-footer table tbody {
  visibility: hidden;
}

.table7S-container .table7S-fixed-sidebar {
  top: 0;
  max-height: calc(100% - 17px);
}

.table7S-container .table7S-fixed-sidebar.mac {
  max-height: 100%;
}

.table7S-container .table7S-fixed-sidebar table thead tr th,
.table7S-container .table7S-fixed-sidebar table thead tr td {
  visibility: hidden;
}

.table7S-container .table7S-fixed-sidebar table thead tr th.cell-fixed,
.table7S-container .table7S-fixed-sidebar table thead tr td.cell-fixed {
  visibility: visible;
  background-color: #5474a0;
  color: white;
}

.table7S-container .table7S-fixed-sidebar table tfoot tr th,
.table7S-container .table7S-fixed-sidebar table tfoot tr td {
  visibility: hidden;
}

.table7S-container .table7S-fixed-sidebar table tfoot tr th.cell-fixed,
.table7S-container .table7S-fixed-sidebar table tfoot tr td.cell-fixed {
  visibility: visible;
  background-color: #eee;
  color: #343434;
}

.table7S-container .table7S-fixed-sidebar table tbody tr th,
.table7S-container .table7S-fixed-sidebar table tbody tr td {
  visibility: hidden;
}

.table7S-container .table7S-fixed-sidebar table tbody tr th.cell-fixed,
.table7S-container .table7S-fixed-sidebar table tbody tr td.cell-fixed {
  visibility: visible;
  background-color: #b5c0d6;
  color: white;
}

.table7S-container .table7S-fixed-sidebar table tbody tr th.cell-fixed:after,
.table7S-container .table7S-fixed-sidebar table tbody tr td.cell-fixed:after {
  opacity: .1;
}

.table7S-container .table7S-fixed-sidebar-header {
  z-index: 2;
  top: 0;
  overflow: hidden;
}

.table7S-container .table7S-fixed-sidebar-header table thead tr th,
.table7S-container .table7S-fixed-sidebar-header table thead tr td {
  visibility: hidden;
}

.table7S-container .table7S-fixed-sidebar-header table thead tr th.cell-fixed,
.table7S-container .table7S-fixed-sidebar-header table thead tr td.cell-fixed {
  visibility: visible;
  background-color: #5474a0;
  color: white;
}

.table7S-container .table7S-fixed-sidebar-header table tbody,
.table7S-container .table7S-fixed-sidebar-header table tfoot {
  visibility: hidden;
}

.table7S-container .table7S-fixed-sidebar-footer {
  z-index: 3;
  bottom: 17px;
  overflow: hidden;
}

.table7S-container .table7S-fixed-sidebar-footer.mac {
  bottom: 0;
}

.table7S-container .table7S-fixed-sidebar-footer table tfoot tr th,
.table7S-container .table7S-fixed-sidebar-footer table tfoot tr td {
  visibility: hidden;
}

.table7S-container .table7S-fixed-sidebar-footer table tfoot tr th.cell-fixed,
.table7S-container .table7S-fixed-sidebar-footer table tfoot tr td.cell-fixed {
  visibility: visible;
  background-color: #eee;
  color: #343434;
}

.table7S-container .table7S-fixed-sidebar-footer table tbody,
.table7S-container .table7S-fixed-sidebar-footer table thead {
  visibility: hidden;
}


/*# sourceMappingURL=table7S.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table7S-wrap">
  <div style="text-align: right;">
    <button onclick="Prev()">Prev</button>
    <button onclick="Next()">Next</button>
  </div>
  <div class="table7S-container">
    <div class="table7S-scroll">
      <table class="table7S">
        <thead>
          <tr>
            <th class="cell-fixed" data-column="1" onclick="Sort(1)">No</th>
            <th class="cell-fixed" data-column="2" style="min-width: 100px;" onclick="Sort(2)">Username</th>
            <th data-column="3" style="min-width: 300px;" onclick="Sort(3)">First Name</th>
            <th data-column="4" style="min-width: 300px;" onclick="Sort(4)">Last Name</th>
            <th data-column="5" style="min-width: 100px;" onclick="Sort(5)">Age</th>
          </tr>
        </thead>
        <!-- <tbody>
						<tr>
							<td colspan="2" class="cell-fixed"></td>
							<td colspan="3" style="text-align: center">no data</td>
						</tr>
					</tbody> -->
        <tbody>
          <tr>
            <td class="cell-fixed" data-column="A_1" onclick="test('A_1')">A_1</td>
            <td class="cell-fixed" data-column="B_1" onclick="test('B_1')">B_1</td>
            <td>C_1</td>
            <td>D_1</td>
            <td>E_1</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_2" onclick="test('A_2')">A_2</td>
            <td class="cell-fixed" data-column="B_2" onclick="test('B_2')">B_2</td>
            <td>C_2</td>
            <td>D_2</td>
            <td>E_2</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_3" onclick="test('A_3')">A_3</td>
            <td class="cell-fixed" data-column="B_3" onclick="test('B_3')">B_3</td>
            <td>C_3</td>
            <td>D_3</td>
            <td>E_3</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_4" onclick="test('A_4')">A_4</td>
            <td class="cell-fixed" data-column="B_4" onclick="test('B_4')">B_4</td>
            <td>C_4</td>
            <td>D_4</td>
            <td>E_4</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_5" onclick="test('A_5')">A_5</td>
            <td class="cell-fixed" data-column="B_5" onclick="test('B_5')">B_5</td>
            <td>C_5</td>
            <td>D_5</td>
            <td>E_5</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_6" onclick="test('A_6')">A_6</td>
            <td class="cell-fixed" data-column="B_6" onclick="test('B_6')">B_6</td>
            <td>C_6</td>
            <td>D_6</td>
            <td>E_6</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_7" onclick="test('A_7')">A_7</td>
            <td class="cell-fixed" data-column="B_7" onclick="test('B_7')">B_7</td>
            <td>C_7</td>
            <td>D_7</td>
            <td>E_7</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_8" onclick="test('A_8')">A_8</td>
            <td class="cell-fixed" data-column="B_8" onclick="test('B_8')">B_8</td>
            <td>C_8</td>
            <td>D_8</td>
            <td>E_8</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_9" onclick="test('A_9')">A_9</td>
            <td class="cell-fixed" data-column="B_9" onclick="test('B_9')">B_9</td>
            <td>C_9</td>
            <td>D_9</td>
            <td>E_9</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_10" onclick="test('A_10')">A_10</td>
            <td class="cell-fixed" data-column="B_10" onclick="test('B_10')">B_10</td>
            <td>C_10</td>
            <td>D_10</td>
            <td>E_10</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_12" onclick="test('A_12')">A_12</td>
            <td class="cell-fixed" data-column="B_12" onclick="test('B_12')">B_12</td>
            <td>C_12</td>
            <td>D_12</td>
            <td>E_12</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_13" onclick="test('A_13')">A_13</td>
            <td class="cell-fixed" data-column="B_13" onclick="test('B_13')">B_13</td>
            <td>C_13</td>
            <td>D_13</td>
            <td>E_13</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_14" onclick="test('A_14')">A_14</td>
            <td class="cell-fixed" data-column="B_14" onclick="test('B_14')">B_14</td>
            <td>C_14</td>
            <td>D_14</td>
            <td>E_14</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_15" onclick="test('A_15')">A_15</td>
            <td class="cell-fixed" data-column="B_15" onclick="test('B_15')">B_15</td>
            <td>C_15</td>
            <td>D_15</td>
            <td>E_15</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_16" onclick="test('A_16')">A_16</td>
            <td class="cell-fixed" data-column="B_16" onclick="test('B_16')">B_16</td>
            <td>C_16</td>
            <td>D_16</td>
            <td>E_16</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_17" onclick="test('A_17')">A_17</td>
            <td class="cell-fixed" data-column="B_17" onclick="test('B_17')">B_17</td>
            <td>C_17</td>
            <td>D_17</td>
            <td>E_17</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_8" onclick="test('A_8')">A_8</td>
            <td class="cell-fixed" data-column="B_8" onclick="test('B_8')">B_8</td>
            <td>C_8</td>
            <td>D_8</td>
            <td>E_8</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_19" onclick="test('A_19')">A_19</td>
            <td class="cell-fixed" data-column="B_19" onclick="test('B_19')">B_19</td>
            <td>C_19</td>
            <td>D_19</td>
            <td>E_19</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_20" onclick="test('A_20')">A_20</td>
            <td class="cell-fixed" data-column="B_20" onclick="test('B_20')">B_20</td>
            <td>C_20</td>
            <td>D_20</td>
            <td>E_20</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_21" onclick="test('A_21')">A_21</td>
            <td class="cell-fixed" data-column="B_21" onclick="test('B_21')">B_21</td>
            <td>C_21</td>
            <td>D_21</td>
            <td>E_21</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_22" onclick="test('A_22')">A_22</td>
            <td class="cell-fixed" data-column="B_22" onclick="test('B_22')">B_22</td>
            <td>C_22</td>
            <td>D_22</td>
            <td>E_22</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_23" onclick="test('A_23')">A_23</td>
            <td class="cell-fixed" data-column="B_23" onclick="test('B_23')">B_23</td>
            <td>C_23</td>
            <td>D_23</td>
            <td>E_23</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_24" onclick="test('A_24')">A_24</td>
            <td class="cell-fixed" data-column="B_24" onclick="test('B_24')">B_24</td>
            <td>C_24</td>
            <td>D_24</td>
            <td>E_24</td>
          </tr>
          <tr>
            <td class="cell-fixed" data-column="A_25" onclick="test('A_25')">A_25</td>
            <td class="cell-fixed" data-column="B_25" onclick="test('B_25')">B_25</td>
            <td>C_25</td>
            <td>D_25</td>
            <td>E_25</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="cell-fixed">A</th>
            <th class="cell-fixed" style="min-width: 100px;">B</th>
            <th style="min-width: 300px;">C</th>
            <th style="min-width: 300px;">D</th>
            <th>E</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="table7S-fixed-header"></div>
    <div class="table7S-fixed-footer"></div>
    <div class="table7S-fixed-sidebar"></div>
    <div class="table7S-fixed-sidebar-header"></div>
    <div class="table7S-fixed-sidebar-footer"></div>
  </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam optio sit, quam praesentium dicta enim architecto aperiam, vero nobis. Possimus assumenda eum dolor sapiente ab, ratione eligendi soluta iure neque.</p>
<!-- <script src="js/jquery-2.2.0.min.js"></script> -->

1 个答案:

答案 0 :(得分：0)

我不确定，但我了解的一件事是，我们必须注册javascript click事件。请对代码进行必要的更改。它将生效

在您的html代码中将此更改为此 

<th class="cell-fixed" data-column="1" id="sortNo">No</th> // remove click function and set ID for each sort

在您的脚本代码中对此进行更改 

$(document).ready(function(){
     document.getElementById("sortNo").addEventListener("click", function(){
       alert('Hello')
   });
});
相关问题
最新问题