jQuery检查浏览器是否支持位置：已修复

如何检查浏览器是否支持position:fixed使用jQuery position:fixed 。 我想我必须使用$.support ，但是怎么样？

感谢您的时间。

Answer 1

最可靠的方法是对它进行实际的function测试。 浏览器嗅探是脆弱和不可靠的。

我在CFT http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED中有一个这样的测试示例。 请注意，应在加载document.body后运行测试。

Answer 2

我发现移动safari（特别是iOS 4.2通过OSX上的iOS模拟器）拒绝在任何地方滚动，除非你等待几毫秒。 因此误报。

我写了一个快速的jquery插件来解决它：

 (function($) { $.support.fixedPosition = function (callback) { setTimeout( function () { var container = document.body; if (document.createElement && container && container.appendChild && container.removeChild) { var el = document.createElement('div'); if (!el.getBoundingClientRect) return null; el.innerHTML = 'x'; el.style.cssText = 'position:fixed;top:100px;'; container.appendChild(el); var originalHeight = container.style.height, originalScrollTop = container.scrollTop; container.style.height = '3000px'; container.scrollTop = 500; var elementTop = el.getBoundingClientRect().top; container.style.height = originalHeight; var isSupported = !!(elementTop === 100); container.removeChild(el); container.scrollTop = originalScrollTop; callback(isSupported); } else { callback(null); } }, 20 ); } })(jQuery); 

Answer 3

 function fixedcheck () { var fixedDiv = $('
').css('position', 'fixed').appendTo('body'); var pos1 = fixedDiv.offset().top; $(window).scrollTop($(window).scrollTop() + 1); var pos2 = fixedDiv.offset().top; fixedDiv.remove(); return (pos1 != pos2) } /* Usage */ $(document).ready(function () { if (!fixedcheck()) alert('Your browser does not support fixed position!') }); 

Answer 4

您可以通过制作如下代码来检查位置是否存在：

    
Hi
   

由于位置存在于所有主浏览器中，因此总是返回true。 我想有没有办法检查位置的可能值，所以你必须检查用户正在查看你的页面的浏览器和版本，如Paolo Bergantino所说。

Answer 5

position:fixed显然适用于Mobile Safari（4.3.2）中除body之外的所有块元素，因此CFT答案（http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED）应该包含：

var isSupported = (container.scrollTop === 500 && elementTop === 100);

Answer 6

上面提到的function测试位置固定支持在Opera Mini上返回误报（它不支持position：fixed）。

Answer 7

我创建了另一个检查，如果在浏览器中确实支持position:fixed 。 它创建固定div并尝试滚动并检查div的位置是否发生了变化。

 function isPositionFixedSupported(){ var el = jQuery("
"); 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; } 

此function在Firefox 22，Chrome 28，IE 7-10，Android Browser 2.3中进行了测试。