iPad Scroll - Kopfzeile wird nur festgelegt, wenn das Scrollen beendet wird

Question

Ich setze meine Heldeneinheit auf Position, nachdem sie nach unten gescrollt wurde. Für die ersten 70px der Seite scrollt die Heldeneinheit zusammen mit dem Rest, bis die Spitze die Heldeneinheit erreicht, die dann repariert werden muss.

nicht fest

Fest

Dies funktioniert überall und auch das iPad, außer dass die Position fixiert wird gesetzt, wenn die Scroll beendet ist anstatt beim Scrollen wie der Browser.

Ich weiß, dass es ist, weil das Scroll-Ereignis nicht während des Moment Scroll ausgelöst wird. Ich habe versucht, dies mit dem folgenden Code zu beheben, aber es hat nicht funktioniert:

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>'); 
}); 

Was ich will, erreichen, ist, dass die Held-Einheit eingestellt werden kann, festgelegt, während die Scroll noch beschäftigt sind. Wenn jemand eine Verbesserung oder eine Alternative vorschlagen kann, würde ich das sehr schätzen, weil ich gerade feststecke.

Answer 1

Verwendung position: sticky; auf dem Helden Element https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

can i use

während dies allein den Trick in Safari tun, werden Sie noch für Browser Handhabung benötigen blättern, die klebrig Positionierung nicht unterstützen.

Answer 2

Wie von toni angegeben, gibt es ein Problem bei Touchstart/Event, das erst nach dem Ende des Scrolls ausgelöst wird. Sie können versuchen, den Versatz von oben auf der Seite des Elements innerhalb eines

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

zu überprüfen, um zu verwenden, wenn Ihr Element in Bezug auf die oben auf der Seite ist

Answer 3

Dies ist ein großes Problem gewesen für ich in der Vergangenheit. Es gibt ein paar Problemumgehungen, die funktionieren, aber im Allgemeinen brechen sie die Erfahrung für andere Browser/Geräte.

This Art von Arbeiten auf iOS Safari, aber es wird es auf dem Desktop und vielen anderen mobilen Browsern arbeiten zu stoppen.

var count = 0; 

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

Da ist A great article here, dass die Vor- und Nachteile von 3 oder 4 verschiedenen Workarounds für dieses Problem hervorhebt. Aber - leider - keine wirkliche Schlussfolgerung.

TL; DR - Nein, es ist kein rock-solid Lösung für dieses, aber es gibt Workarounds, die helfen können.

Answer 4

Unter der Annahme, dass Ihr Held-Einheit id="hero-unit" hat, dann kann man seine Position ändern, um einen Listener festgelegt, der ihren Abstand vom oberen Rand des Bildschirms überprüft, wie folgt aus:

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