Scorrimento iPad - l'intestazione è impostata su Fisso solo quando lo scorrimento termina

Question

Ho impostato la posizione della mia unità eroe dopo averlo fatto scorrere verso il basso. Quindi per il primo 70px della pagina l'unità dell'eroe scorre insieme al resto finché la cima raggiunge l'unità dell'eroe, che quindi deve essere riparata.

non fisso

fisso

Questo funziona bene ovunque e anche l'iPad, tranne che la posizione è impostato su fisso quando il rotolo è finito invece che durante lo scorrimento come il browser.

Lo so perché l'evento di scorrimento non viene attivato durante lo scorrimento del momento. Ho cercato di risolvere questo problema utilizzando il seguente codice, ma non ha funzionato:

document.addEventListener("touchstart", function(){ 
    $('body').prepend('<p>touch start</p>'); 
    that.tid = setInterval(function(){ 
     $.event.trigger(
     { type: "touchcontinuem" } 
     ); 
    },10) 
}, false); 

document.addEventListener("touchend", function(){ 
    $('body').prepend('<p>touch end</p>'); clearTimeout(that.tid); 
}, false); 

$(document).on("touchcontinuem", function(){ 
    $('body').prepend('<p>touch continuem</p>'); 
}); 

Quello che voglio ottenere è che l'eroe-unità può essere impostata a fisso, mentre il rotolo è ancora occupato. Se qualcuno può suggerire un miglioramento o un'alternativa apprezzerei molto perché sono bloccato in questo momento.

Answer 1

uso position: sticky; sull'elemento eroe https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

can i use

mentre questo da solo farà il trucco in Safari, sarà ancora bisogno di scorrere la gestione per i browser che non supportano il posizionamento appiccicoso.

Answer 2

Come indicato da toni, ci sono problemi su touchstart/evento che si attivano solo dopo la fine della pergamena. Si può cercare di utilizzare l'offset dalla parte superiore della pagina dell'elemento all'interno di un

$(window).on("scroll", function() { 
    If ($(element).offset().top < 70) 
     Do thigs 
    Else 
     Do other 
}) 

per controllare dove il vostro elemento è in relazione alla parte superiore della pagina

Answer 3

Questo è stato un grosso problema per io in passato Esistono alcune soluzioni alternative che funzionano, ma in genere rompono l'esperienza per altri browser/dispositivi.

This tipo di lavoro su iOS safari, ma smetterà di funzionare su Desktop e molti altri browser mobili.

var count = 0; 

document.addEventListener("touchmove", function(){ 
    var data = document.getElementById('data'); 
    data.innerHTML = count++; 
}); 

C'è A great article here che mette in evidenza i pro ei contro di 3 o 4 diversi modi di aggirare per questo problema. Ma, purtroppo, nessuna vera conclusione.

TL; DR - No, non c'è una soluzione solida per questo, ma ci sono soluzioni alternative che possono aiutare.

Answer 4

Supponendo che il vostro eroe-unità ha id="hero-unit", allora si può cambiare la sua posizione ad fissato con un ascoltatore che controlla la sua distanza dalla parte superiore dello schermo, in questo modo:

var el = document.getElementById('hero-unit'); 

document.addEventListener('touchmove', function() { 
    var distance = el.getBoundingClientRect().top; 

    if (distance <= 0) el.style.position = 'fixed'; // Attach it to the top 
    else el.style.position = 'some other value'; // Dethatch it from the top 

}, false);