cách tạo Hiệu ứng cuộn tiêu đề Danh bạ iPhone cho html?

Question

Tôi đã thiết lập một jsFiddle cơ bản để cung cấp thêm ý tưởng về những gì tôi muốn xảy ra.

http://jsfiddle.net/nicekiwi/p7NaQ/2/

Hy vọng rằng nếu bạn nghĩ về trang liên hệ trên iOS cho iPhone về những gì phần của bảng chữ cái địa chỉ liên lạc bạn đang tìm kiếm và làm thế nào nó thay đổi khi bạn di chuyển trang, bạn sẽ có ý tưởng, nếu không đọc.

Về cơ bản, tôi có các phần nội dung trong một trang cuộn dọc cột đơn. Khi đầu của tiêu đề đầu tiên (tiêu đề 1 trong jsFiddle) nhận được trên cùng của màn hình khi bạn di chuyển xuống trang nó sẽ dính vào đầu cho đến khi bạn đến tiêu đề tiếp theo (tiêu đề 2), tại điểm "Tiêu đề 2 "sẽ giữ vị trí của nó trong khi bạn cuộn và" Tiêu đề 1 "sẽ được đẩy ra khỏi trang web và cứ tiếp tục cho phần còn lại của tiêu đề.

Và khi cuộn sao lưu trang ngược lại sẽ xảy ra, ví dụ: "tựa đề 4" sẽ ở vị trí và khi phần cuối của nội dung "tựa đề 3" đạt "tiêu đề 3" sẽ xuất hiện liền mạch ở trên "tựa đề 4 "và ở trên cùng của màn hình cho đến khi nó đạt đến đỉnh của nội dung riêng của nó.

Tôi muốn tạo điều này trong HTML/CSS với Mootools 1.3 làm Thư viện JavaScript mà tôi chọn.

Bất kỳ ý tưởng nào về cách tôi có thể thực hiện việc này? Chúc mừng.

Answer 1

Tôi thực sự không thấy bài đăng của bạn cho đến khi ai đó chỉ ra bản sao của tôi dưới dạng bản sao, hãy xem số này Freeze Header until Irrelevant (HTML, CSS and JS)