2012-06-12 49 views
5

Tôi thực sự đánh giá cao sự trợ giúp của chuyên gia jquery như một phương pháp tôi đã sử dụng trước đây, không hoàn toàn làm việc cho ứng dụng mới này.Jquery sửa vị trí div khi div đạt vị trí màn hình, không di chuyển vị trí

những gì tôi đang cố gắng để đạt

Tôi có hai tab ở phía bên phải và bên trái của wrapper trang web của tôi, mà chỉ trở nên rõ ràng khi bạn di chuyển xuống dưới trang. Và khi các tab đạt đến trung tâm của màn hình, sau đó chúng trở thành vị trí cố định, xuất hiện để sau đó khóa vào vị trí. Nhìn thấy hiệu quả/ý tưởng chung dưới ...

http://jsfiddle.net/motocomdigital/SGCHt/2/


CÁC VẤN ĐỀ

lẽ bạn tự hỏi tại sao tôi đặt ra câu hỏi nếu fiddle trên đã được làm việc.

Fiddle ở trên hoạt động vì nó hoạt động trên vị trí cuộn từ cửa sổ trên cùng.

Nhưng trên trang web của tôi, các tab này chỉ tồn tại trên Khu vực nội dung và không thể chạy phía trên vào phần tiêu đề, biểu ngữ, trình chiếu của tôi.

Trên ví dụ trên jsFiddle, bạn sẽ thấy không có tiêu đề, biểu ngữ hoặc trình chiếu. Vì vậy, đây không phải là vấn đề đối với tập lệnh hiện tại của tôi bởi vì các cột vùng chứa tab chạy tất cả các cách trên cùng.

Vui lòng xem các câu đố bên dưới có kết hợp bố cục khác nhau và sau đó bạn sẽ thấy sự cố của mình.

Xin lưu ý rằng tôi đã xóa nền màu cam trên các cột của vùng chứa tab để bạn có thể thấy quan điểm thiết kế.

  1. Header, Nav, Slideshow, Advert - http://jsfiddle.net/motocomdigital/SGCHt/3/
  2. Header, Nav, Advert - http://jsfiddle.net/motocomdigital/SGCHt/4/
  3. Header, Nav - http://jsfiddle.net/motocomdigital/SGCHt/5/

Bây giờ thấy fiddle dưới đây trong đó có nền màu cam trên tab các cột chứa để bạn có thể xem cấu trúc về cách các tab chỉ có thể xuất hiện bên cạnh div nội dung.

http://jsfiddle.net/motocomdigital/SGCHt/6/


SOLUTION

Các kịch bản một số cách cần bổ sung các vị trí cố định để các tab, khi vòi nước đạt 50% so với đỉnh của màn hình. Nhưng tôi không biết làm thế nào để tính toán điều này như các thùng chứa tab không chạy tất cả các cách để trên cùng của cửa sổ. Có phương pháp kịch bản nào khác để đạt được điều này không?

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn bạn!

+0

Xem xét sử dụng aa [** jQuery Plugin Parallax **] (http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm) với một tính năng Pinned rằng là trình duyệt chéo thân thiện để xử lý các tab được đề cập. – arttronics

Trả lời

6

Thay vì nhìn vào cuộn xuống đến 50% chiều cao màn hình, chúng tôi có thể thêm vào vị trí của khu vực nội dung từ trên cùng.

http://jsfiddle.net/SGCHt/7/

+0

Cảm ơn bạn! Rất đơn giản. Đã không được sử dụng .offset trước – Joshc

Các vấn đề liên quan