的位置特徵檢測：固定

Question

我試圖找到檢測腳本，如果相對於視position: fixed元素，而不是整個文檔的設備的地方。

目前，標準的桌面瀏覽器和移動Safari（iOS設備5）這樣做，而Android設備放置相對於整個文檔的固定元件。

我已經找到了一些測試來檢測這一點，但沒有一個似乎工作：

• http://kangax.github.com/cft/給了我一個假陽性，當我通過它從Android設備。
• https://gist.github.com/1221602給了我一個假陰性當我通過它在iPhone與iOS 5

是否有人知道在哪裏可以找到/如何編寫實際檢測的測試？我不想依靠瀏覽器嗅探。

Answer 1

據當時Modernizr貢獻者，你不能沒有檢測所使用的瀏覽器做到這一點。這些貢獻者在該領域非常成熟。

在iOS和Android設備上測試position: fixed在Modernizr項目中的Undetectables wiki page下列出。

的MobileHTML5 website列出position:fixed支持。 http://mobilehtml5.org/

Answer 2

其實，從燈絲集團的傢伙做了與他們的Fixedfixed把已知誤報的用戶代理字符串在他們的測試聰明的做法。

檢查它@http://github.com/filamentgroup/fixed-fixed

有人可能會用一些假陰性完成它太，並使其成爲Modernizr的aditional的featur測試。

Answer 3

我創建如果position:fixed在瀏覽器確實是支持的另一種檢查。它創建固定的div並嘗試滾動並檢查div的位置是否改變。

function isPositionFixedSupported(){ 
    var el = jQuery("<div id='fixed_test' style='position:fixed;top:1px;width:1px;height:1px;'></div>"); 
    el.appendTo("body"); 

    var prevScrollTop = jQuery(document).scrollTop(); 
    var expectedResult = 1+prevScrollTop; 
    var scrollChanged = false; 

    //simulate scrolling 
    if (prevScrollTop === 0) { 
     window.scrollTo(0, 1); 
     expectedResult = 2; 
     scrollChanged = true; 
    } 

    //check position of div 
    suppoorted = (el.offset().top === expectedResult); 

    if (scrollChanged) { 
     window.scrollTo(0, prevScrollTop); 
    } 

    el.remove(); 

    return suppoorted; 
} 

此功能已在Firefox 22，Chrome 28，IE 7-10，Android Browser 2.3中測試。