Заголовок замораживания пока не имеет значения (HTML, CSS и JS)

Question

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

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

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

Answer 1

редактировать: http://jsfiddle.net/BCtP8/3/

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

СТАРЫЙ ПОСТ Вот, пожалуйста, человек:

http://jsfiddle.net/BCtP8/

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

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

Answer 2

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

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

Я выставил пример на JSFiddle .

Answer 3

За что стоит:

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

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

Сценарий:

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/)