title: iOS Safari address bar causes sticky header to be jumpy
body: <p>On <a href="http://keebs.com" rel="nofollow">my site</a>, 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.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var lastScrollTop = 0;
  
  $(window).scroll(function(){
     var st = $(this).scrollTop();
     if (st &lt; lastScrollTop || st === 0){
         $('#masthead').removeClass('unpinned');
     } else {
        $('#masthead').addClass('unpinned');
     }
     lastScrollTop = st;
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.unpinned {
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>How can I ensure that the class of <code>unpinned</code> stays added to the <code>#masthead</code> element until the site scrolls all the way to the top?</p>