iPad滚动 - 标题仅在滚动结束时设置为固定

Question

我将我的英雄单位设置为在向下滚动到其位置后固定的位置。因此，对于页面的前70px，英雄单元与其余部分一起滚动，直到顶部到达英雄单位，然后需要修复。

未修复

固定

除了在滚动完成时将位置设置为固定而不是像浏览器一样滚动时，这在任何地方以及ipad都可以正常工作。

我知道，因为在动量滚动期间不会触发滚动事件。我尝试使用以下代码修复此问题，但它不起作用：

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

我想要实现的是，当滚动仍然忙时，可以将英雄单位设置为固定。如果有人可以提出改进或替代方案，我会非常感激，因为我现在卡住了。

Answer 1

在英雄元素https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

上使用position: sticky;

can i use

虽然仅此一项就可以在safari中完成，但对于不支持粘性定位的浏览器，仍然需要滚动处理。

Answer 2

这对我来说一直是个大问题。有一些解决方法可行，但它们通常会破坏其他浏览器/设备的体验。

This类型适用于iOS Safari，但它会阻止它在桌面和许多其他移动浏览器上运行。

var count = 0;

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

A great article here强调了针对此问题的3种或4种不同解决方案的优缺点。但遗憾的是，没有真正的结论。

TL; DR - 不，这不是一个坚如磐石的解决方案，但有一些可以提供帮助的解决方法。

Answer 3

正如toni指出的那样，touchstart / event上只有在滚动结束后才会触发问题。 您可以尝试使用

中元素页面顶部的偏移量

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

检查元素相对于页面顶部的位置

Answer 4

假设您的英雄单位有id="hero-unit"，那么您可以使用侦听器将其位置更改为固定，该侦听器检查其与屏幕顶部的距离，如下所示：

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