簡體   English   中英

如何解決 position:fixed for a bottom toolbar on iOS (iPhone/iPad)

[英]How to resolve position:fixed for a bottom toolbar on iOS (iPhone/iPad)

我有一個欄,通過使用 position:fixed 固定在我網站上每個頁面的底部。 問題是在 iPhone 或 iPad 等設備上,此屬性不受尊重。

我嘗試使用 javascript 來檢測屏幕高度、滾動位置,這在 iPad 上非常有效:

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

如您所見,我正在使用 jQuery。 問題是這段代碼在 iPhone 上不太適用,因為窗口的高度不包括位置欄(如果存在調試欄,也包括),所以該欄一開始就在正確的位置,但是當你滾動它時固定在正確位置上方(Mobile Safari 的地址欄使用的像素數量)。

有沒有辦法獲取此信息並正確修復此工具欄?

請記住,這不是為 iPhone 制作的網站,所以我根本無法使用像 iScroll 這樣的技巧。

從iOS 8.4開始,你可以使用position: sticky; 分別position: -webkit-sticky; 解決這個問題。

我只是做了類似的事情,將導航粘貼到窗口的頂部 導航從標題下面開始然后如果你滾動它就會粘住。 iOS5確實支持固定定位。 該項目將在滾動結束捕捉到位置,但仍然可以正常工作。 '#sticky-anchor'是我導航的包裝div。

不記得我發現這一切的地方,從很多網站得到了一些小塊。 您可以根據自己的需要進行調整。

$(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' });
        }
    };
};

我在我的網站上修復了這個,並在Stack Overflow上回答了這個問題。 從那時起,我已經得到了實施它的人們的感謝。 對不起,我沒時間摘要。

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

iScroll probaply是解決您問題的最簡單方法。 與您的相信相反,它也適用於Android和Opera。 它的新版本表現出色。

http://cubiq.org/iscroll-4

這段jquery代碼對我有用:

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

否則#footer_menu的css是:

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

我認為設置高度有助於正確渲染,在桌面瀏覽器上我希望此菜單固定在瀏覽器窗口的底部。

嘗試根據window.innerHeight在iPhone上隱藏/顯示底部固定導航。 每當工具欄顯示時,通常在向上滾動時,您可以顯示底部導航並在向下滾動時隱藏工具欄,當工具欄隱藏時。

你可以使用這樣的代碼:

    var windowHeight = {
  small: window.innerHeight,
  middle: window.innerHeight,
  big: window.innerHeight
}
window.addEventListener('resize', function(){
  var currentHeight = window.innerHeight;
  if (currentHeight < windowHeight.small) {
    windowHeight.small = currentHeight;
  }

  if (currentHeight > windowHeight.big) {
    windowHeight.big = currentHeight;
  }

  console.log('windowHeight.small', windowHeight.small, 'windowHeight.middle', windowHeight.middle, 'windowHeight.big', windowHeight.big, 'currentHeight', currentHeight);

  if (currentHeight === windowHeight.big) {
    transform(stickyNav, 'translate3d(0,120%,0)');
    console.log('Hide bottom nav on big screen!');
  } else if (currentHeight === windowHeight.middle) {
    transform(stickyNav, 'translate3d(0,0,0)');
    console.log('Show bottom nav on middle screen!');
  } else {
    transform(stickyNav, 'translate3d(0,-100%,0)');
    console.log('Display bottom nav high up on smaller screen!');
  }
})

變換(stickyNav,'translate3d(x,x,x)')函數是一個簡單的函數,它接受底部導航,然后應用變換以隱藏/顯示放置在底部的項目。

我記得使用position: sticky; bottom: 0;解決了這個問題position: sticky; bottom: 0; 對於高度為零的容器元素,則使用position: absolute; bottom: var(--how-much-space-u-like-below-bottom-of-screen-and-fixed-element); position: absolute; bottom: var(--how-much-space-u-like-below-bottom-of-screen-and-fixed-element); 在你想固定在視口底部的實際東西上。 我相信它至少在 iOS Safari 15 和 16 上解決了這個問題。

<div class="sticky-container" style="position: sticky; bottom: 0;">
  <div class="fixed-to-bottom" style="position: absolute; bottom: 1rem;">
    <button>hello world</button>
  </div>
</div>

感謝Google,不是我:

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

實際上非常簡單。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM