How to prevent rubberband scrolling on iOS

Question

I have a fixed header that is not visible on scroll down but is visible on scroll up, the problem is that when I reach the top of the page on iPhone, the header disappears (probably because the screen thinks I'm scrolling down even though I'm not)

I've tried this solution: Disable Chrome's pull-to-refresh on iPhone And it doesn't work when I run the function on element body, or element html, on ready. The site just loads and loads with a spinner if I do that. Should I run the function somewhere else or on a different element? It feels like it has to be run at ready? And on body or html since those are the elements I want to prevent from rubberbanding. Also see my code for the scrolling function and some CSS, is there anything I can do with that to help the header not from disappearing at the top?

menuOnScroll: function () {

            // Hide Header on on scroll down
            var didScroll;
            var lastScrollTop = 0;
            var delta = 5;

            $(window).scroll(function(event){
                didScroll = true;
            });

            setInterval(function() {
                if (didScroll) {
                    hasScrolled();
                    didScroll = false;
                }
            }, 250);

            function hasScrolled() {
                var st = $(this).scrollTop();
                var subMenus = $('.extended-navigation.show').attr('id');
                // Make sure they scroll more than delta
                if(Math.abs(lastScrollTop - st) <= delta)
                    return;


                    if (st > lastScrollTop){
                        // Scroll Down

                        $('#topbar').removeClass('nav-up').addClass('scroll-top-bar');
                        $('.main-menu-container, #search-extended, .index-info-mobile').addClass('sticky nav-hide').removeClass('nav-show');
                        if ((window).matchMedia("(min-width: 767.98px)").matches) {
                            $('.hamburgermenu-button').addClass('collapsed');
                            $('.main-navigation').addClass('d-xs-none');
                            $('.main-menu a[href="#'+subMenus+'"]').click();
                        }

                    } else {
                        // Scroll Up
                        if(st + $(window).height() < $(document).height()) {
                            $('#topbar').removeClass('scroll-top-bar').addClass('nav-up');
                            $('.main-menu-container, #search-extended, .index-info-mobile').removeClass('nav-hide').addClass('nav-show');
                            if ((window).matchMedia("(min-width: 767.98px)").matches) {
                                $('.main-navigation').addClass('d-xs-none');
                                $('.hamburgermenu-button').addClass('collapsed');
                                $('.main-menu a[href="#'+subMenus+'"]').click();
                            }
                        }

                    }

                    if($(window).scrollTop() < delta){
                        $('.main-menu-container, .index-info-mobile').removeClass('sticky');
                    }if($(window).scrollTop() > delta) {
                      $('.main-menu a[href="#'+subMenus+'"]').click();  
                    }

                    lastScrollTop = st;


            }
    }



some CSS:

   .sticky {
        z-index: 9998;
        position: fixed;
        top: 0;
        width: 100%;
        transition: top 0.3s;
        margin-top:0px;
        &.nav-hide {
            top: 0px;
            transition: top 0.3s;
        }
        &.nav-show {
            top: 70px;
            transition: top 0.3s;
        }
      }

    #topbar {
        height: 70px;
        width: 100%;
        background-color: $dark-blue;
        position: fixed;
        top: 0;
        transition: top 0.3s;
        z-index: 9999;
        align-items: center;
        &.scroll-top-bar {
            top: -70px;
        }    
    }