JQuery проверить, поддерживает ли браузер положение: исправлено

Как проверить, поддерживает ли браузер position:fixed с помощью jQuery. Я предполагаю, что я должен использовать $.support, я думаю, но как?

Спасибо за ваше время.

Ответы

Ответ 1

Самый надежный способ - проверить его на самом деле. Обнаружение браузера является хрупким и ненадежным.

У меня есть пример такого теста в CFT http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED. Обратите внимание, что тест следует запускать после загрузки document.body.

Ответ 2

Я обнаружил, что мобильное сафари (в частности, iOS 4.2 через iOS Simulator на OSX) отказывается прокручивать куда угодно, если вы не подождали несколько миллисекунд. Следовательно, ложный положительный.

Я написал быстрый плагин 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. Я полагаю, что нет возможности проверить возможные значения позиции, поэтому вам нужно будет проверить, какой браузер и какая версия пользователь просматривает вашу страницу, как сказал Паоло Бергантино.

Ответ 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);

Ответ 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.