JQuery липкий й - PullRequest
Новая
       18

JQuery липкий й

0 голосов
/ 24 апреля 2019

Я работаю над липким заголовком для таблиц, которые располагаются посередине и ближе к нижней части страницы.У меня это работает по большей части, но я не могу понять, как правильно расположить заголовок.

Я пробовал фиксированное положение, но у него есть проблема с прокруткой за пределами поля, абсолютные путаницы с шириной заголовков и липким, кажется, вставляют заголовок в таблицу и мешают с форматированием.

Есть идеи?

    function stickyTableHead(tableID) {
  var $tmain = $(tableID);
  var $parent = $(tableID).parent();
  var pos = $parent.offset().top + $tmain.find(">thead").height();
  var $tScroll = $tmain.children("thead")
    .clone()
    .wrapAll('<table id="tScroll" />')
    .parent()
    .addClass($(tableID).attr("class"))
    .css("position", "sticky")
    .css("top", 0)
    .css("display", "none")
    .prependTo($tmain);


  $($parent).scroll(function() {
    var dataScroll = $tScroll.data("scroll");
    dataScroll = dataScroll || false;
    if (jQuery(this).scrollTop() >= $tmain.find(">thead").height()) {
      if (!dataScroll) {
        $tScroll
          .data("scroll", true)
          .show()
          .find("th").each(function() {
            $(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
          });
      }
    } else {
      if (dataScroll) {
        $tScroll
          .data("scroll", false)
          .hide();
      }
    }
  });
}

$(document).ready(function() {
  stickyTableHead('#transactionT');
});

JsFiddle, например, потому что это слишком долго для текстового редактора здесь https://jsfiddle.net/zazvorniki/7g245fr6/54/

...