Вы пытаетесь исправить шапку, в то время как прокручивающееся тело создает эффект резинки. Мне пришлось протестировать это на iPhone 5C, потому что браузеры настольных компьютеров не прокручиваются, если вы не используете OSX, поэтому имейте в виду, что эти результаты ограничены более старой версией iOS (10.something). Вот мои выводы:

Плохое решение: изменение CSS при прокрутке окна

Вы можете добавить прослушиватель событий к событию прокрутки окна и исправить положение шапки, когда пользователь прокручивает сверху (т.е., когда свойство window.scrollY отрицательное):

CSS

body {
    margin: 0;
    padding: 0;
}

.masthead {
    overflow: auto;
    /* move this div to a gpu-processed layer */
    -webkit-transform: translate3d(0, 0, 0); /* for iOS <8.1 */
    transform: translate3d(0, 0, 0);
}

.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
}

JavaScript

var masthead = document.querySelector(".masthead");
var mastheadHeight = masthead.clientHeight;
var topContentMargin = 16;
mastheadHeight += topContentMargin;

window.addEventListener("scroll", function(e) {
    fixMastheadOnOverscroll();
});

function fixMastheadOnOverscroll() {
    let overscrollingTop = window.scrollY < 0;
    if (overscrollingTop) {
        masthead.classList.add("fixed-top");
        document.body.style.marginTop = mastheadHeight + "px";
    } else {
        masthead.classList.remove("fixed-top");
        document.body.style.marginTop = "0px";
    }
}

Разбивка кода

Как вы можете догадаться, этот код просто фиксирует верхний заголовок вверху, когда пользователь выполняет прокрутку сверху вниз. Несколько придирчивых мелочей точки:

• overflow: auto на шапке - исправляет обрушение полей при отсутствии прокрутки;
• Добавление transform - это известный прием для продвижения элемента на его собственный уровень и его рендеринга с помощью графического процессора. Ускоряет ли это позиционирование шапки при прокрутке? Понятия не имею, это просто предложение, над которым нужно работать.
• добавление поля к основному тексту, когда прокрутка приводит к отображению содержимого под заголовком; если вы этого не сделаете, он будет просто отображаться под фиксированным заголовком.
• поскольку верхнее поле содержимого сжимается при прокрутке, мы добавляем его высоту к полю тела, чтобы пользователь не видел, как содержимое прыгает вверх и вниз, когда тело защелкивается на место.

Почему это плохо?

Насколько мне известно, запуск функции изменения DOM при прокрутке стоит дорого. От собственной команды разработчиков Twitter:

It’s a very, very, bad idea to attach handlers to the window scroll event.

Слушатель событий почти постоянно запускает функцию. Также могло быть какое-то странное поведение на iOS из-за того, что инженеры Apple запускают обратный вызов только в конце события прокрутки (я думаю).

Хорошее решение

¯ \ (ツ) / ¯

Честно говоря, я понятия не имею, как это сделать без использования overscroll-behaviour-y. Вы можете использовать уродливый взлом, описанный выше, на iOS, только обнаружив браузер. Есть несколько улучшений производительности, которые вы можете сделать:

• подавить обратный вызов, но это, вероятно, приведет к замедлению работы;
• жестко запрограммируйте высоту шапки в margin-top в другом классе CSS и используйте это имя класса в теле вместо непосредственного изменения стиля тела, но это дает вам меньше гибкости.