Клонированный фиксированный заголовок с абсолютной шириной от оригинала - PullRequest
Новая
       33

Клонированный фиксированный заголовок с абсолютной шириной от оригинала

0 голосов
/ 06 сентября 2018

Я искал способы заставить мой <table> отображать фиксированный заголовок, когда пользователь прокручивает страницу вниз.Я так близок к завершению этой реализации - клонированием исходного заголовка и добавлением его в таблицу.Когда я перестраиваю клонированный заголовок поверх исходного заголовка, я замечаю, что ширина отличается из-за динамических данных, которые подаются в таблицу, которые могут изменять размеры определенной ширины столбца.По какой-то причине мой код не определяет ширину столбцов, и я не могу понять, почему?

Есть предложения? 

$(document).ready(function() {
  var table = $('#list');
  var stuck = table.find('#header');
  var start = table.offset().top;
  var clone = stuck.clone().prop('id', 'fixedHeader');
  var target_children = table.children();

  // Fetch for the width of each column in the original header and place into the new clone
  clone.children().width(function(i, val) {
    return target_children.eq(i).width(); // I believe something is broken here...
  });

  // Add the Clone to the Table
  clone.prependTo(table);

  var fixedHeader = $('#fixedHeader');
  fixedHeader.hide(); // Hide the Clone at first so it appears upon scrolling

  // When Scrolling, realign the new fixedHeader and duplicate look
  $.event.add(window, 'scroll', function() {
    var p = $(window).scrollTop();
    $(fixedHeader).css('position', (p > start) ? 'fixed' : 'static');
    $(fixedHeader).css('left', table.offset().left);
    $(fixedHeader).css('right', table.offset().right);
    $(fixedHeader).css('top', (p > start) ? '0px' : '');
    $(fixedHeader).css('width', table.width());

    // Some old Code that may be helpful
    // Add the current widths of the table's header and place into the cloned header
    //$(fixedHeader).children('tr:first').children().width(function(i, val) {
      //return table.closest('table').children('tbody').children('tr:first').children().eq(i).width();
    //});

    // Show or Hide the new cloned Fixed Header on Scroll
    if (p > start)
      fixedHeader.show();
    else
      fixedHeader.hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='list'>
  <thead id='header' class='fixed'>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- This will be a long list of fetched data that may vary in size.
         As a consequence the column widths may be stretched depending on large words-->
    <tr>
      <td>Fetched Data 1</td>
      <td>Fetched Data 2</td>
      <td>Fetched Data 3</td>
    </tr>
  </tbody>
</table>
...