Question

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

感谢您的时间。

Answer 1

最可靠的方法是对其进行实际功能测试。浏览器嗅探很脆弱且不可靠。

我在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 = $('<div>').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

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

<html>
<script type="text/javascript">
test = function() {
if(!!document.getElementById("test").style.position) {
alert('true');
}
else{
alert('false');
}
}
</script>

<body>
<p id="test" onclick="test();" style="position:fixed;">Hi</p>
</body>
</html>

由于位置存在于所有主浏览器中，因此总是返回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

上面提到的功能测试Position fixed support在Opera Mini上返回误报（不支持位置：已修复）。

Answer 7

如果浏览器确实支持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中进行了测试。

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

7 个答案: