Come faccio a verificare se il browser supporta position:fixed utilizzando jQuery. Suppongo di dover usare $.support Penso, ma come?jQuery controlla se la posizione di supporto del browser: fissa
Grazie per il vostro tempo.
Il modo più affidabile sarebbe quello di eseguire il test funzionale. Lo sniffing del browser è fragile e inaffidabile.
Ho un esempio di tale test in CFT http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED. Si noti che il test deve essere eseguito dopo il caricamento dello document.body.
Si potrebbe verificare se la posizione esiste facendo un codice come questo:
<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>
Poiché la posizione esiste in tutti i browser questo formato tornerà sempre vero. Immagino che non ci sia un modo per verificare i possibili valori di posizione, quindi dovrai verificare quale browser e quale versione l'utente sta visualizzando la tua pagina come ha detto Paolo Bergantino.
position:fixed a quanto pare funziona per tutti gli elementi di blocco a Mobile Safari (4.3.2), ad eccezione del corpo, quindi la risposta CFT (http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED) dovrebbe avere questo in esso:
var isSupported = (container.scrollTop === 500 && elementTop === 100);
trovo che Safari mobile (iOS 4.2 in particolare tramite il simulatore iOS su OSX) si rifiuta di spostarsi ovunque a meno che non si aspetta un paio di millisecondi. Da qui il falso positivo.
ho scritto un rapido plugin jQuery per lavorare intorno ad esso:
(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 funzione di test Position fixed support, di cui sopra, restituisce un falso-positivo su Opera Mini (che non supporta position: fixed).
Ho creato un altro controllo se position:fixed è realmente supportato nel browser. Crea un div fisso e prova a scorrere e controlla se la posizione di div è cambiata.
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;
}
Questa funzione è stata testata in 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!')
});
Se ci dici perché ne hai bisogno, potremmo essere in grado di darti una soluzione per qualsiasi cosa tu stia facendo. –
Voglio rilevare se il browser supporta fisso, se sì allora bene userò qualche brutto trucco per posizionare l'elemento. –
Sarebbe più semplice aggiungere una classe al className di Element e quindi gestire il tuo hack in un foglio di stile? – ajm