Исправить таблицу строк с определенным классом сверху при прокрутке

У меня есть таблица HTML с Javascript. http://jsfiddle.net/T9Bhm/3179/Исправить таблицу строк с определенным классом сверху при прокрутке

Я хочу иметь возможность прокручивать и удерживать определенную строку вверху (не заголовок, строка). Я пробовал:

$(window).bind('scroll', function() { 
    console.log('menuTop') 
    if ($(window).scrollTop() > 10) { 
     $('.menuTop').addClass('fixed'); 
    } else { 
     $('.menuTop').removeClass('fixed'); 
    } 
});

Это не работает. Я хочу, чтобы цифры и буквы оставались наверху, когда на свитке (те, которые классифицируются как «menuTop»). Но на свитке они, похоже, складываются в одну с левой стороны. «H» находится сверху.

Любые идеи?

источник

2015-09-08 thatOneGuy

возможно дубликат [JQuery: лучший плагин для таблицы с фиксированным заголовком] (http://stackoverflow.com/questions/5524649/jquery-best-plugin-for-table -with-fixed-header) – benjarwar

@benjarwar технически не заголовок .... – thatOneGuy

Я не согласен, но даже если вы не используете '' '' '' 'или' '' '' 'элементы (что вам нужно), вы столкнетесь с той же проблемой, когда фиксированное/абсолютное позиционирование ставит ячейки за пределами области таблицы (см. мой комментарий ниже). – benjarwar

Нет простого способа сделать это исключительно с помощью HTML/CSS. Для этого требуется решение для JavaScript. Основная методология заключалась бы в клонировании ячеек заголовка с использованием <div> или других элементов блока и положению клонов абсолютно или исправлено.

number plugins there, который может сделать эту работу за вас. Если вы откажетесь от своего собственного, вы должны попытаться написать какой-то код и опубликовать его здесь, только когда вы застрянете с конкретной, воспроизводимой ошибкой.

источник

2015-09-08 13:33:13 benjarwar

ах действительно :(что вроде отстой, думал, что я делал что-то не так с позиционированием :(Спасибо за ссылки, получится прямо на это :) Жду подождать, чтобы увидеть, если кто-то другой ответит с решением, если бы я не выбрал ваш, поскольку он указывает мне в правильном направлении :)) – thatOneGuy

Вы * можете * установить абсолютное/фиксированное позиционирование на элементах заголовка таблицы. Проблема заключается в том, что она выводит его из области рендеринга таблицы, что означает, что '' '' '' 'столбцы больше не будут связаны с заголовками, а ширина будет неправильно рассчитана. Другое решение, если вы поехали по этому маршруту, может включать итерацию через ячейки таблицы для вычисления правильных ширины элементов заголовка (после визуализации таблицы и, возможно, изменения размера окна). – benjarwar

Да, все, что имеет смысл, но его большая работа haha, я думал, что будет проще: (( – thatOneGuy

Я думаю, вы что-то вроде этого, если да, то вам нужно добавить класс в 10-й tr.

.fixed{ 
    display: table; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 824px; 
}

jsfiddle ink

Надеется, что это будет поможет вам.

источник

2015-09-08 13:41:15

Это исправляет позиции элементов, но они потеряют выравнивание столбцов с остальными строками/ячейками данных. – benjarwar

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

Кроме того, ширина таблицы расширяется от содержимого, заполняющего ячейки, ячейки в этой строке не будут иметь одинаковую ширину, если вы не обнаружите «столбцов-братьев» из вычисленной ширины ячеек строк с помощью JS и установите каждую строку- ширину ячейки в этой строке.

источник

2015-09-08 13:46:37 Twintails

nice информация :) спасибо – thatOneGuy

Мне удалось решить это с помощью всех других ответов.

Обновлено скрипку: http://jsfiddle.net/T9Bhm/3183/

При этом, хотя, как Упоминание «Twintails», я должен явно установить ширину столбцов, что боль, если я честен.

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

.fixed{  
    display: table; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 95.72%; 

}

Другое дело, что никогда не должно быть сделано, как установить ширину в CSS так, как я сделал здесь. Тем не менее, это помогает мне в моей ситуации.

Надеется, что это помогает кто-то еще :)

источник

2015-09-08 14:07:46 thatOneGuy

Исправить таблицу строк с определенным классом сверху при прокрутке

ответ

Смежные вопросы