2015-10-12 11 views
9

Ecco il codice completo http://jsfiddle.net/vinex08/uhm26em1/Offset Top non funziona in IOS

jQuery(function ($) { 
var distance = $('.c').offset().top, 
    $window = $(window); 

$window.scroll(function() { 
    if ($window.scrollTop() >= distance) { 
     $(".b").css({ 
      position: 'fixed', 
      top: '0' 
     }); 
    } else { 
     $(".b").css({ 
      position: 'inherit', 
      top: '10' 
     }); 
    } 
}); 
});` 

E 'di lavoro su Chrome e Firefox, ma quando ho controllato tramite AIR iPad e iPhone, l'effetto esegue anche prima della 'Classe C' colpisce la cima.

+0

Prova utilizzando 'posizione() top' http://jsfiddle.net/Lt9g39md/ – Tushar

+0

ancora lo stesso :( –

+0

Avete un _real_ campione di lavorare. il tuo codice (non in JSFiddle) che si comporta allo stesso modo? –

risposta

3

Spero che questo vi aiuterà:

jQuery(function ($) { 
    var distance = $('.c').offset().top; 
    $(window).scroll(function() { 
     var wndwTop = $(this).scrollTop(); 
     if (wndwTop >= distance) { 
      $(".b").css({ 
       position: 'fixed', 
       top: '0' 
      }); 
     } else { 
      $(".b").css({ 
       position: 'inherit', 
       top: '10' 
      }); 
     } 
    }); 
}); 
+1

Puoi spiegare cosa hai risolto il problema? Oltre ad aggiungere un paio di variabili, non vedo alcuna differenza. – allicarn

2

Qui abbiamo conosciuto la correzione per Safari mobile. In primo luogo, rileva il browser; in secondo luogo, un po 'di comportamento cambiamento della funzione di 'compensazione':

// mobile Safari reports wrong values on offset() 
// http://dev.jquery.com/ticket/6446 
if (/webkit.*mobile/i.test(navigator.userAgent)) { 
    (function($) { 
     $.fn.offsetOld = $.fn.offset; 
     $.fn.offset = function() { 
     var result = this.offsetOld(); 
     result.top -= window.scrollY; 
     result.left -= window.scrollX; 
     return result; 
     }; 
    })(jQuery); 
} 

inserire questo codice da qualche parte dopo l'inizializzazione jquery, ma prima che i vostri calcoli di offset.

+0

Vorrei verificare che window.scrollY e window.scrollX esistano prima di usarli, altrimenti potresti ottenere un risultato NaN se la struttura di safari mobile cambia in futuro. – omerkarj

+0

Ciò significa che sarebbero rompere la compatibilità all'indietro, ma se vuoi farlo comunque, puoi sostituire 'result.top - = window.scrollY;' con 'result.top - = window.scrollY || 0;', e 'result.left - = window.scrollX; 'con' re sult.left - = window.scrollX || 0 '. – Yeti

+0

Link aggiornato alla segnalazione di bug: https://bugs.jquery.com/ticket/6446 – allicarn