的位置特征检测：固定

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中测试。