Detect if the browser supports position: fixed

Question

Is there any reliable method to detect if the browser supports position fixed?

I've found some solutions but none of them seems to work well on all browsers.

Answer 1

While developing a mobile application with jQuery Mobile I had the same problem. The headers should have fixed position (if supported by the browser) and the solution was to set the headers with a default position: fixed on the css and checked the supported property through the following method:

function isPositionFixedSupported() {
    return $( '[data-role="header"]' ).css( 'position' ) === 'fixed';
}

The returned value is static if not supported by the browser.

Answer 2

This code works completely fine. Just tested it on a Windows ME box with IE6, returns 'null' because IE6 doesn't support position:fixed;.

by the way, this is NOT originally my code. ALL credits go to Kangax's Github who has many functions there to test browser features.

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;
    return isSupported;
  }
  return null;
}

If it runs, it works, if it doesn't, you'll get a null.