Bug only on iPhone for a fixed submenu when scrolling

Question

I am in the process of finalizing a fully custom, fully responsive website, per below :

http://blakel11.github.io/starter-kit/app/

There is a bug with the submenu (category filter) that I cannot figure out, and only occurs in the actual (iPhone 6s and iPhone 6) Mobile View. It works perfectly fine on desktop. And it doesn't show on the emulator.

Basically, in actual Mobile View on the phone, the submenu bar disappears while scrolling down, and then reappears after scrolling back up.

Does anyone know why this is happening?

I have GIFs that demonstrates the bug below.

• Here is a GIF of what the submenu bar looks like on the Desktop Mobile View (works fine) :

  recordit.co/RZzmmzNsKJ

• Here is a GIF of what the submenu bar looks like on the actual (iPhone) mobile view (buggy, disappears and then reappears) :

  recordit.co/fWH2A1APrp

I don't know how to post the code correctly. It wasn't working.

JS - line - 65 app/scripts/filter.js in the github page

//fix lateral filter and gallery on scrolling
$(window).on('scroll', function(){
    fixGallery();
});

function fixGallery() {
    var offsetTop = $('.cd-main-content').offset().top,
        scrollTop = $(window).scrollTop(),
        headerHeight = $('.main-header').height();
    ( scrollTop + headerHeight >= offsetTop ) ? $('.cd-main-content').addClass('is-fixed') : $('.cd-main-content').removeClass('is-fixed');
}

Scss - line - 35

app/styles/_content-filter.scss

Thanks in advance.

Update - I found it is a problem with iOS and not firing events until the scroll is over. Any thoughts on what to fire instead of on('scroll')?