Cửa hàng Apple cố định kiểu div cố định trên LEFT

Question

Tôi đang kéo tóc ra ngoài. Tôi có một trang web mà tôi muốn có một vị trí cố định div bên trái (con vẹt & dịch) theo trang khi nó cuộn xuống. http://www.cartoonizemypet.com/new/help/

Tôi đã theo dõi tut này http://jqueryfordesigners.com/fixed-floating-elements/ và nhận được những gì tôi nghĩ là một hiệu ứng hoàn hảo! Sau đó, tôi đã thử xem nó trên điện thoại của tôi .... Ngay sau khi tôi phóng to div di chuyển trên văn bản! :(Bạn có thể thấy ảnh hưởng trên trình duyệt thông thường bằng cách thu hẹp cửa sổ trình duyệt và cuộn sang phải.

Có ai biết cách ngăn con vẹt di chuyển theo chiều ngang không? Tôi đã tìm kiếm giải pháp cao và thấp nhưng nó bắt đầu dường như không thể.

đây là CSS liên quan

#content { 
    padding-top:20px; 
    padding-bottom:713px; /* Height of the footer element */ 
    width:888px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
} 

#help-col1 { 
    left:0; 
    width:218px; 
    position:absolute; 
    height:500px; 
} 

#parrot-box { 
    position:absolute; 
    top:0; 
    margin-top: 20px; 
} 

#parrot-box.fixed { 
    position:fixed; 
    top:0; 
} 

#help-col2 { 
    width:634px; 
    float:right; 
} 

hãy kiểm tra mã nguồn trang web (http://www.cartoonizemypet.com/new/help/) để xem sCRIPT và HTML. Mọi trợ giúp sẽ được MUCH đánh giá cao.

Answer 1

Không phải lo lắng tất cả mọi người, chồng tôi đã tìm ra một cách khác để thực hiện công việc này! :)

Thay vì di chuyển con vẹt bằng trang; Tôi sẽ có nhiều phiên bản của con vẹt bên trong câu trả lời divs.Bằng cách đó, khi người dùng nhấp vào một câu trả lời, nó sẽ mở ra và con vẹt xuất hiện bên cạnh nó.

Không phải cách tôi đã lên kế hoạch ban đầu, nhưng tôi nghĩ tôi có thể làm cho cách nhìn mới này trở nên tốt hơn!

Cảm ơn sự trợ giúp ở mọi tốc độ! :)

Answer 2

Khi con vẹt nhận được lớp 'cố định', con vẹt (bên trong # help-col1) có giá trị 'trái' là 0. Điều này có nghĩa là anh ta sẽ luôn được gắn vào phía bên trái của trang ... bất kể cái gì kích thước của cửa sổ là gì và nó cuộn như thế nào.

Những gì bạn đang yêu cầu cho anh ta hoạt động như một yếu tố cố định vị trí khi người dùng cuộn theo chiều dọc, nhưng không theo chiều ngang. Theo như tôi biết, điều này là không thể. Đã sửa lỗi cố định ... x và y.

Tuy nhiên, có một số giải pháp (like this one) nói về việc sử dụng javascript để vượt qua vấn đề này. Lý thuyết ở đây là một javascript nhỏ có thể nghe khi trang đã được cuộn ngang và nếu nó có, di chuyển con vẹt trở lại vị trí cho phù hợp.

Cá nhân, tôi sẽ xem xét sử dụng css media queries để tạo bố cục cụ thể cho thiết bị di động. Bạn có thể gán CSS cụ thể cho phiên bản di động của trang web, vì vậy hy vọng người dùng không cần thu phóng (hoặc cuộn ngang) tại tất cả =)

Chúc may mắn!

Answer 3

Trình xử lý sự kiện cuộn JS đã được đề xuất, nhưng tất cả các triển khai dựa vào nó đều bị lag hệ thống. Tôi cho rằng bạn sẽ có may mắn hơn bằng cách sử dụng truy vấn phương tiện để xác định xem vị trí cố định có phù hợp hay không (tức là OK nếu cửa sổ/thiết bị đủ rộng hoặc thay thế bằng hành vi thay thế nếu không).

Bạn thực sự có thể để con vẹt ở trên cùng cho màn hình hẹp và bảo tồn một số bất động sản cũng như giải quyết các phiên bản Safari cũ không có khả năng giải thích chính xác position:fixed. Bạn chắc chắn có thể thực hiện ra một cách tiếp cận tinh tế hơn, nhưng điều này phải là một điểm khởi đầu tốt - để thử nó ra, thực thi kịch bản sau đây trên trang của bạn (chỉ trong giao diện điều khiển là tốt):

$('head').append('<style type="text/css">#parrot-box.fixed {position:absolute;}</style><style type="text/css" media="screen and (min-width: 982px)">#parrot-box.fixed {position:fixed !important;}</style>'); 

Đầu tiên nó sẽ ghi đè khai báo #parrot-box.fixed gốc và sau đó áp dụng kiểu dáng nổi của bạn cho bất cứ khi nào cửa sổ có chiều rộng tối thiểu 982px (chiều rộng trình bao trang của bạn).