복잡한 웹 양식의 끈적한 헤더 (iPhone)

Question

많은 섹션에 하위 섹션이있는 복잡한 웹 양식 (교육을받은 사용자가 아닌 드라이브 바이)을 설계하고 있습니다. 상황에 따라 양식이 상당히 길어질 수 있습니다. (하위) 섹션 머리글이 완전히 지나치게 스크롤 될 때까지 표시 될 경우 유용성이 크게 향상됩니다.

예를 들어 iPhone에서 음악 아티스트를 스크롤 할 때 'B'헤더가 위로 스크롤되고 'A'가 화면 위로 올라와 화면에서 벗어날 때까지 'A'헤더가 계속 표시됩니다. 마찬가지로 Excel에서는 표의 맨 위 행을 고정 할 수 있지만 iPhone 예제처럼 풍부하지는 않습니다.

HTML/CSS로 가능합니까? 아니면 자바 스크립트도 필요합니까? 이러한 유형의 행동에 대한 예가 있습니까? 당신이 제공 할 수있는 팁이나 리드? 나는 어디서부터 시작해야할지 모른다.

그래서 내가 헤더 div의 상단 정렬보기 창의 교회법 및 컨텐츠 사업부와 함께한다 생각하고 있어요 :

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

Answer 1

이것은 거의 확실하게 자바 스크립트가 필요한 것들 중 하나입니다. CSS3는 다소 복잡한 동작을 허용하지만,이 복합체를 허용하지는 않습니다. iPhone-like sliding headers :

그러나, 나는 jQuery for Designers과 Left Logic의, Remy Sharp으로이의 jQuery를 구현 당신을 가리킬 수 있습니다.

나는이 질문에 답하고 비디오 팟 캐스트 보너스가 있다고 생각합니다. =)

Answer 2

가 나는 자바 스크립트없이 가능하다고 생각하지 않습니다. 함정은 새로운 섹션으로 스크롤 할 때 헤더가 변경되는 것입니다. 또는 더 일반적으로 스크롤 할 수 있고 창에있을 때 창 상단에 붙이는 것입니다. JavaScript를 사용하여 뷰포트의 위치를 ​​확인하고 주어진 시간에 적절한 헤더를 첨부해야한다고 생각합니다.

나는 해결책을 찾을 시간이 없다는 것에 사과하지만, 나는 나의 대답이 좀 더 깊은 통찰력을 제공했으면 좋겠다.