Липкие заголовки в сложной веб-форме (а-ля айфон)

Question

Я разрабатываю сложную веб-форму (для обученных пользователей, а не водителей), которая имеет много разделов, многие из которых содержат подразделы. Форма может стать довольно длинной, в зависимости от ситуации. Удобство использования значительно улучшилось бы, если бы заголовки (под) раздела оставались видимыми до тех пор, пока (под) раздел полностью не прокрутился.

Например, при прокрутке музыкальных исполнителей на iPhone заголовок «A» остается видимым до тех пор, пока заголовок «B» не прокрутится вверх, поднимая «A» вверх и за пределы экрана. Аналогично, Excel позволяет заморозить верхнюю строку таблицы, хотя это не так богато, как в примере с iPhone.

Возможно ли это с помощью HTML / CSS или потребуется также JavaScript? Есть ли примеры такого поведения? Какие советы или предложения вы могли бы предложить? Я даже не знаю, с чего начать.

Так что я думаю, заголовок div должен быть выровнен по верху с пересечением области просмотра и содержимого div:

   +--------------+
   |  [content]   |
+-------------------------+
|  | +----------+ |       |
|  | | [header] | |       |
|  | +----------+ |       |
|  |              |       |
|  |              |       |
|  +--------------+       |
|                         |
|      [view pane]        |
+-------------------------+

Answer 1

Это одна из тех вещей, которые почти наверняка потребуют JavaScript. CSS3 допускает некоторое относительно сложное поведение, но я не думаю, что оно допускает что-либо столь сложное.

Однако я могу указать вам на реализацию этого jQuery, Реми Шарп , jQuery для дизайнеров и Left Logic : iPhone наподобие скользящих коллекторов .

Я думаю, что это отвечает на ваш вопрос и идет с бонусом видеоподкаста ... =)

Answer 2

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

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