Question

The following example of making a position : fixed does not work in my FF16.02 / IE9. But as far as I known, it should be crossbrowser compatible.
Any Ideas?

JSfiddle of the issue

Answer 1

The problem lies in document.body.scrollTop. That is not cross-browser compatible. Use window.scrollY, and it should work perfectly fine.

Your code would change to this:

var foo = document.getElementById('foo');
document.onscroll = function(e) {
    if (window.scrollY > foo.offsetTop) {
        foo.className = "foo sticky";
    } else {
        if (foo.className.indexOf('sticky')) {
            foo.className = "foo";
        }
    }
};​

Demo