Как исправить дерганья липкой шапки таблицы на мобильных?

Question

[z_u_q]

Сделал свою таблицу на основе плагина jquery floatthead. У таблицы есть липкая шапка. И на мобильных внизу появляется скролл таблицы и первая колонка становится липкой.

Пример моей таблицы: https://codepen.io/malinosky/pen/vrBgMP

Все бы ничего, но на реальных устройствах работает криво. Шапка таблицы дергается. Первая колонка тоже. Как избавиться от этих дерганий?

Answer 1

[Stalker_RED]

Оно не только на мобильных дергается.
Прекратить использовать transform: translate для таких штук, и переделать на position: fixed;
https://codepen.io/anon/pen/RJbVaK

Ессно оно не всегда должно быть fixed, а только когда доехало до границы вьюпорта.

Comments

[z_u_q]

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

с fixed - https://codepen.io/malinosky/pen/mKbpJZ
без fixed - https://codepen.io/malinosky/pen/vrBgMP

[z_u_q]

Stalker_RED https://codepen.io/malinosky/pen/QxLMag еще такой вариант попробовал реализовать (без плагина). Но в данном решении - position: fixed. А нужен - absolute => нужно вычислять top. Не понимаю, как вычислять top.

[Stalker_RED]

z_u_q, эта библиотека, которой вы пользуетесь - она умеет вычислять топ. Но работает она не мгновенно, и потому визуально видны дерганья. Это никак не лечится, кроме как заставить всех пользователей купить топовые железяки, например.

с fixed - https://codepen.io/malinosky/pen/mKbpJZ
без fixed - https://codepen.io/malinosky/pen/vrBgMP

Оба этих примера не учитывают скролл, и последний пункт обрезан. Появление скролла можно отслеживать скриптом, если что.
https://jsfiddle.net/Stalk/r8emudau/

[z_u_q]

Stalker_RED, по Вашему примеру не понял, как сделать так, чтоб при фиксированной шапке все пять пунктов шапки, а не четыре? https://jsfiddle.net/n41uvgod/2/

[Stalker_RED]

z_u_q, это вы сломали, или сам плагин настолько корявый?


Сейчас этот "липучий" заголовок вообще свой жизнью живет.