iOS Safari address bar causes sticky header to be jumpy

Question

On my site, when the user scrolls down, the top bar disappears, and when the user scrolls back up, the top bar reappears. This is done through simply adding and removing a class to the top bar element depending on what state of scroll the user is in.

JS

var lastScrollTop = 0;

$(window).scroll(function(){
   var st = $(this).scrollTop();
   if (st < lastScrollTop || st === 0){
       $('#masthead').removeClass('unpinned');
   } else {
      $('#masthead').addClass('unpinned');
   }
   lastScrollTop = st;
});

CSS

.unpinned {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

My issue is when viewing the site on iOS Safari. The built-in function of Safari's address bar shrinking when the user scrolls down seems to be conflicting with my own disappearing/reappearing top bar. So, for example, on mobile, when I click on a project near the bottom, the site is supposed to scroll all the way to the top and open a div revealing the project. Instead, as the site scrolls up, it stops midway due to Safari's address bar enlarging and causing the class to be removed from the top bar.

How can I ensure that the class of unpinned stays added to the #masthead element until the site scrolls all the way to the top?