¿Cómo puedo verificar si el navegador admite position:fixed usando jQuery. Supongo que tengo que usar $.support, pero ¿cómo?jQuery compruebe si la posición de soporte del navegador: fija
Gracias por su tiempo.
La manera más confiable sería realizar una prueba funcional. El rastreo del navegador es frágil y poco confiable.
Tengo un ejemplo de dicha prueba en CFT http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED. Tenga en cuenta que la prueba se debe ejecutar después de que se cargue document.body.
Se puede comprobar si existe posición al hacer un código como este:
<html>
<script type="text/javascript">
test = function() {
if(!!document.getElementById("test").style.position) {
alert('true');
}
else{
alert('false');
}
}
</script>
<body>
<p id="test" onclick="test();" style="position:fixed;">Hi</p>
</body>
</html>
Dado que existe posición en todos los navegadores principal de esto siempre devolverá true. Imagino que no hay forma de verificar los posibles valores de posición, por lo que deberá verificar qué navegador y qué versión está viendo el usuario en su página, como dijo Paolo Bergantino.
position:fixed aparentemente funciona para todos los elementos de bloque en Mobile Safari (4.3.2), excepto cuerpo, así que la respuesta CFT (http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED) deberían tener esto en él:
var isSupported = (container.scrollTop === 500 && elementTop === 100);
encuentro que Safari móvil (iOS 4.2 en concreto a través del simulador de iOS en OSX) se niega a desplazarse en cualquier lugar a menos que esperar unos pocos milisegundos. De ahí el falso positivo.
escribí un plugin de jQuery rápida a trabajar alrededor de ella:
(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) 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;
callback(isSupported);
}
else {
callback(null);
}
},
20
);
}
})(jQuery);
La función de prueba de Position fixed support, mencionado anteriormente, devuelve un falso positivo sobre el Opera Mini (que no soporta position: fixed).
He creado otra comprobación si position:fixed es realmente compatible con el navegador. Crea un div fijo e intenta desplazarse y comprobar si la posición del div ha cambiado.
function isPositionFixedSupported(){
var el = jQuery("<div id='fixed_test' style='position:fixed;top:1px;width:1px;height:1px;'></div>");
el.appendTo("body");
var prevScrollTop = jQuery(document).scrollTop();
var expectedResult = 1+prevScrollTop;
var scrollChanged = false;
//simulate scrolling
if (prevScrollTop === 0) {
window.scrollTo(0, 1);
expectedResult = 2;
scrollChanged = true;
}
//check position of div
suppoorted = (el.offset().top === expectedResult);
if (scrollChanged) {
window.scrollTo(0, prevScrollTop);
}
el.remove();
return suppoorted;
}
Esta función se probó en Firefox 22, Chrome 28, IE 7-10, Android Browser 2.3.
function fixedcheck() {
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!')
});
Si nos dice por qué necesita esto, podemos darle una solución para lo que sea que esté haciendo. –
Quiero detectar si el navegador admite fijo, en caso afirmativo, entonces bien, de lo contrario usaré algún truco feo para posicionar el elemento. –
¿Sería más fácil agregar una clase al ClassName del Elemento y luego manejar su hack en una hoja de estilo? – ajm