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

【问题标题】：jQuery check if browser support position: fixedjQuery 检查浏览器是否支持位置：已修复
【发布时间】：2017-01-07 14:49:16
【问题描述】：

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

感谢您的宝贵时间。

【问题讨论】：

如果您告诉我们您为什么需要这个，我们可能会为您提供解决方法。
我想检测浏览器是否支持固定，如果是，那么很好，否则我将使用一些丑陋的黑客来定位元素。
将一个类附加到元素的 className 然后在样式表中处理您的 hack 会更容易吗？

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

很好的例子，很好的网站，顺便说一句！
不幸的是，该测试在 MobileSafari 中返回了误报，其中不支持 position:fixed
我和 Alec 有同样的问题，但正如 prendio2 所指出的，不幸的是，这个测试不适用于 MobileSafari。虽然其他方面都很棒！
嗨！我认为您的功能测试很棒。你对你的东西的使用条款是什么？ :) 如果仅此而已，我很乐意将其归功于您。 :D 谢谢！
这似乎在 iOS 4.2 的 MobileSafari 中正常工作（显示否定结果），但在 iOS 5beta 中也显示相同的结果，其中 position:fixed 行为已更新。

【解决方案2】：

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

我写了一个快速的 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);

【讨论】：

【解决方案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!')
});

【讨论】：

【解决方案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 所说。

【讨论】：

【解决方案5】：

position:fixed 显然适用于 Mobile Safari (4.3.2) 中除正文之外的所有块元素，因此 CFT 答案 (http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED) 应该包含以下内容：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案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 中测试。

【讨论】：