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

Question

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

不固定

固定

这在任何地方都可以正常工作，在 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

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

can i use

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