Freeze Header до Irrelevant (HTML, CSS и JS)

У меня есть несколько разных таблиц, которые я хочу отображать вертикально вниз по странице. Проблема в том, что разные таблицы имеют разные заголовки столбцов.

На картинке темная рамка представляет собой окно просмотра. Пунктирная красная рамка - это заголовок красного заголовка, но обратите внимание, что он "заморожен" в верхней части окна просмотра. Это верно, пока во втором изображении зеленый заголовок не начнет его заменять. http://imagebin.org/172108

Кто-нибудь знает, как это можно сделать, используя очень легкий сценарий (другими словами, я не хочу JQuery или что-то еще) и CSS. У меня есть то преимущество, что мне нужно только его сделать на Webkit (что означает, что css3 также является опцией). Меня не волнует, если заголовки на самом деле не являются частью html <table> - они должны, очевидно, правильно выстраиваться в линию, хотя.

Ответ 1

edit: http://jsfiddle.net/BCtP8/3/

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

СТАРЫЙ ПОЧТА Здесь вы идете человек:

http://jsfiddle.net/BCtP8/

Извините за любые проблемы, которые могут возникнуть, я довольно новичок во всей веб-разработке, и у меня нет опыта предсказать, что может случиться.

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

Ответ 2

Это возможно только с Javascript - я не могу придумать способ сделать это просто с помощью CSS.

В основе ответа лежит использование position:fixed элемента. Я хотел бы предложить клонировать thead вашей таблицы для прикрепления в фиксированной позиции в верхней части таблицы, а затем добавить прослушиватель событий для события scroll и проверить положение каждой таблицы против прокрученной суммы.

Я положил пример на JSFiddle.

Ответ 3

Для чего это стоит:

Здесь есть несколько ответов, но я не думаю, что они действительно отвечают на вопрос. Они не работают с заголовками таблиц (thead), либо используют сторонние библиотеки. Есть некоторые тонкие проблемы с поднятием thead из таблицы - самая большая из которых заключается в том, что ячейки свернуть, если текст заголовка шире или уже, чем данные в tbody.

Вот мое решение, которое решает проблему без каких-либо библиотек и работает над заголовками таблиц. Он не делает никаких предположений о стилизации таблицы или размере заголовков; все рассчитано. Проверяется только в Chrome в соответствии с требованиями OP.

Script:

function initFloatingHeaders() {
  var tables = document.querySelectorAll('table.float-header');
  var i = tables.length;

  while (i--) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'floating-header';
    var clone = table.cloneNode(true);
    wrapper.appendChild(clone);
    table.parentNode.insertBefore(wrapper, table);

    var thead = table.querySelector('thead');
    wrapper.style.width = thead.scrollWidth + 'px';  
    wrapper.style.height = thead.scrollHeight + 'px';
    wrapper.style.left = table.offsetLeft + 'px';     
  }

  window.addEventListener('scroll', function() {
    var headers = document.querySelectorAll('div.floating-header');
    var bodyHeight = document.body.offsetHeight;
    var i = headers.length;
    while (i--) {
      var header = headers[i];
      var tableBounds = header.nextSibling.getBoundingClientRect();
      if (tableBounds.top < 0 && tableBounds.bottom > 0) {
        header.style.display = 'block';
      } else {
        header.style.display = null;
      }
    }
  }, false);
}

В таблицах должен быть применен класс float-header, а initFloatingHeaders - при загрузке или documentReady. Пример: http://jsbin.com/ulusit/2 (Старый пример с плохими переходами: http://jsbin.com/ulusit/)