Checking for position:fixed Support
. The CSS fixed value for the position property is extremely useful, particularly in allowing for persistent navigation on long pages. Naturally, versions of IE before 7 don’t support it. I’ve been getting around that using JavaScript.
It’s probably not what the specification states, but a fantastically useful browser method for interpreting CSS would be to simply ignore property values that it doesn’t understand—then, for example, you could have a position: absolute; line followed by a position: fixed; line, and non-compliant browsers (such as IE) would use the former and ignore the latter. Instead, an unrecognized value throws the element(s) affected back to their default positioning (which is presumably static).
There are other methods for fixing this, including one that doesn’t use JavaScript, and this one from Jonathan Snook. They’re full fixes, in that they make IE replicate the position: fixed behavior. My approach is much more lightweight, just using some JavaScript to see if it’s supported and then changing classnames based on that (or, invoking a more complete solution).
It’s rather simple: load the page, create a new element with position: fixed; and top: 0;, then check its offsetTop property. If it’s not 0, then the browser doesn’t support position: fixed and you can work around this as you like.
Here’s the JavaScript I use for this:
var testPositionFixed = {
addEvent: function( obj, type, fn ) {
//John Resig's function for adding event handlers to objects.
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
},
supportsFixed: function() {
var testDiv = document.createElement("div");
testDiv.id = "testingPositionFixed";
testDiv.style.position = "fixed";
testDiv.style.top = "0px";
testDiv.style.right = "0px";
document.body.appendChild(testDiv);
var offset = 1;
var supported = false;
if (typeof testDiv.offsetTop == "number") {
if (testDiv.offsetTop != null) {
if (testDiv.offsetTop != "undefined") {
offset = parseInt(testDiv.offsetTop);
}
}
}
if (offset === 0) {
supported = true;
}
return supported;
}
}
testPositionFixed.addEvent(window, "load", function() { alert(testPositionFixed.supportsFixed()); });
(Obviously, change the alert to whatever function you want to handle the true or false value.)
24 Apr 2010 at 14:52
FYI: This reports “true” on MobileSafari/iPhone OS, which does not support fixed positioning. Likely a result of Safari lying to us.