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

Кстати, стоит отметить, данное решение не работает на мобильных платформах.
HTML

<article class="persistent-area">
   <h1 class="persistent-header">
   <!-- stuff and stuff -->
</article>

jQuery JavaScript

Что делает скрипт. В цикле проходим по нужным нам заголовкам (.persist-area), клонируем его. Заголовок остается невидимым до тех пор, пока он не понадобится.

Каждый раз когда окно скролится мы запускаем некий тест.

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

function UpdateTableHeaders() {
   $(".persist-area").each(function() {

       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)

       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });
       };
   });
}

// DOM Ready
$(function() {

   var clonedRow;

   $(".persist-area").each(function() {
       clonedHeaderRow = $(".persist-header", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");

   });

   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");

});

CSS

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

 

Демо Скачать

Это перевод, оригинальная статья.

(Visited 489 times, 1 visits today)