iPad scroll - header only set to fixed when scrolling ends

Question

I set my hero-unit to position fixed after scrolling down to it's position. So for the first 70px of the page the hero-unit scrolls along with the rest until the top reaches the hero-unit which then needs to be fixed.

Not fixed

Fixed

This works fine everywhere and also the ipad except that the position is set to fixed when the scroll is finished instead of during the scrolling like the browser.

I know it's because the scroll event is not fired during the momentum scrolling. I tried to fix this using the following code but it did not work:

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

What I want to achieve is that the hero-unit can be set to fixed while the scroll is still busy. If anyone can suggest an improvement or an alternative I would greatly appreciate because i'm stuck right now.

Answer 1

use position: sticky; on the hero element https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

can i use

while this alone will do the trick in safari, you will still need scroll handling for browsers that don't support sticky positioning.

Answer 2

This has been a big issue for me in the past. There are a few workarounds that do work, but they generally break the experience for other browsers/devices.

This kind of works on iOS safari, but it will stop it working on Desktop and a lot of other mobile browsers.

var count = 0;

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

There's A great article here that highlights the pros and cons of 3 or 4 different work-arounds for this issue. But—sadly—no real conclusion.

TL;DR - No, there's not a rock-solid fix for this, but there are workarounds that can help.