Cách giải quyết vị trí: cố định cho thanh công cụ dưới cùng trên iOS (iPhone/iPad)

Question

Tôi có một thanh cố định ở cuối mỗi trang trên trang web của tôi bằng cách sử dụng vị trí: cố định. Vấn đề là trên các thiết bị như iPhone hoặc iPad, tài sản này không được tôn trọng.

Tôi cố gắng để sử dụng javascript để detec chiều cao màn hình, di chuyển vị trí, và các công trình này một cách hoàn hảo trên iPad:

$(window).scroll(function () { $("#bar").css("top", ($(window).height() + $(document).scrollTop() - 90) +"px"); }); 

Như bạn có thể thấy tôi đang sử dụng jQuery. Vấn đề là mã này không hoạt động trên iPhone vì chiều cao của cửa sổ không bao gồm thanh vị trí (và cả thanh gỡ lỗi nếu có), vì vậy thanh này đi đúng vị trí lúc đầu, nhưng khi bạn cuộn nó cố định ở trên vị trí bên phải (số lượng pixel được sử dụng bởi thanh địa chỉ của Mobile Safari).

Có cách nào để lấy thông tin này và sửa chữa đúng thanh công cụ này không?

Xin lưu ý đây không phải là trang web được tạo cho iPhone, vì vậy tôi không thể sử dụng các thủ thuật như iScroll.

Answer 1

Tôi chỉ có thể chỉ cho bạn một số hướng:

• fixed-positioning-on-mobile-safari
• css-position-fixed-solution
• the-mobile-webkit-css-fixed-position-problem
• SO: weird-webkit-issue-with-position-fixed

Answer 2

Cảm ơn Google, không phải là tôi:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

Khá đơn giản, thực sự.

Answer 3

Tôi vừa làm một cái gì đó như thế này, dán điều hướng vào TOP của cửa sổ. Điều hướng bắt đầu bên dưới tiêu đề rồi đánh dấu nếu bạn cuộn qua nó. iOS5 hỗ trợ định vị cố định. Mục sẽ chụp theo vị trí SAU đầu cuộn, nhưng vẫn hoạt động tốt. '#sticky-anchor' là div bao bọc xung quanh điều hướng của tôi.

Đừng nhớ nơi tôi đã tìm thấy tất cả những điều này, có rất nhiều phần từ nhiều trang web. Bạn có thể điều chỉnh để phù hợp với nhu cầu của mình.

$(window).scroll(function(event){ 

// sticky nav css NON mobile way 
    sticky_relocate(); 

    var st = $(this).scrollTop(); 

// sticky nav iPhone android mobile way 
// iOS 4 and below 

    if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) { 
     //do nothing uses sticky_relocate above 
    } else if (navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i)) { 

     var window_top = $(window).scrollTop(); 
     var div_top = $('#sticky-anchor').offset().top; 

     if (window_top > div_top) { 
      $('#sticky').css({'top' : st , 'position' : 'absolute' }); 
     } else { 
      $('#sticky').css({'top' : 'auto' }); 
     } 
    }; 
}; 

Answer 4

iScroll probaply sự là giải pháp đơn giản nhất để vấn đề của bạn. Trái ngược với bạn tin rằng nó cũng hoạt động cho android và opera. Phiên bản mới của nó đang hoạt động tuyệt vời.

http://cubiq.org/iscroll-4

Answer 5

này chút mã jquery làm việc cho tôi:

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){ 
    $("#footer_menu").css("position", "fixed").css("top", $('window').height()); 
}; 

nếu không css cho #footer_menu là:

position:fixed; 
bottom:0; 
width:100%; 
padding:5px 0; 
text-align:center; 
height:44px; 

Tôi nghĩ rằng việc thiết lập chiều cao giúp với render đúng cách và trên trình duyệt trên máy tính để bàn, tôi muốn menu này được cố định ở cuối cửa sổ trình duyệt.

Answer 6

Tôi đã sửa lỗi này trên trang web của mình và đã trả lời câu hỏi này trên Stack Overflow. Kể từ đó tôi đã nhận được rất nhiều lời cảm ơn từ những người đã thực hiện nó. Xin lỗi tôi không có thời gian cho một bản tóm tắt.

https://stackoverflow.com/a/10030251/1118070

Answer 7

Kể từ iOS 8.4, bạn có thể sử dụng position: sticky; tương ứng position: -webkit-sticky; để sửa lỗi này.