Jquery Check If Browser Support Position: Fixed

May 30, 2024 Post a Comment

How do I check if browser supports position:fixed using jQuery. I assume I have to use $.support I think, but how? Thank you for your time.

Solution 1:

The most reliable way would be to actually feature-test it. Browser sniffing is fragile and unreliable.

I have an example of such test in CFT http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED. Note that the test should be run after document.body is loaded.

Solution 2:

I find that mobile safari (specifically iOS 4.2 via the iOS Simulator on OSX) refuses to scroll anywhere unless you wait a few miliseconds. Hence the false positive.

I wrote a quick jquery plugin to work around it:

(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) returnnull;
          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);

Solution 3:

functionfixedcheck () {
    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!')
});

Solution 4:

You could check if position exists by making a code like this:

<html><scripttype="text/javascript">
test = function() {
if(!!document.getElementById("test").style.position) {
alert('true');
}
else{
alert('false');
}
}
</script><body><pid="test"onclick="test();"style="position:fixed;">Hi</p></body></html>

Since position exists in all main browser this will always return true. I imagine there isn't a way to check the possible values of position, so you'll have to check which browser and which version the user are viewing your page as Paolo Bergantino said.

Solution 5:

position:fixed apparently works for all block elements in Mobile Safari (4.3.2) except body, so the CFT answer (http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED) should have this in it:

var isSupported = (container.scrollTop === 500 && elementTop === 100);

JavaScript Guide