position:fixed; feature detection

by laustdeleuran

HTML

<h1>Do this browser support position:fixed;?</h1>
<div id="res">I have no idea</div>

CSS

h1 { font-weight:bold; }

JavaScript

// Test completely stolen/borrowed/hijacked/kidnapped from http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED
var fixedPos = 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;
},
setResult = function($res){
    $res.text(fixedPos ? "Yay, this browser really does support position:fixed;!" : "Boo, either this browser doesn't support position:fixed; or the test sucks :(");
};

$(document).ready(function(){
    $res = $('#res');
    setInterval(function(){
        setResult($res);            
    },5000);
    setResult($res);;
});