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

Кстати, стоит отметить, данное решение не работает на мобильных платформах.
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;
}

Демо   Скачать

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

(4 votes, average: 4,50 из 5)

 Loading ...