title: Sticky header on mobile browser
body: <p>I need a sticky header on a mobile browser. I'm currently using this jquery script:</p>
  
  <pre><code>&lt;script&gt;
    $(function(){
      var stickyHeader = $('#persist-wrap').offset().top;
      $(window).scroll(function(){
        if( $(window).scrollTop() &gt; stickyHeader ) {
          $('#persist-wrap').addClass("sticky");
        } else {
          $('#persist-wrap').removeClass("sticky");
        }
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>with this CSS code:</p>
  
  <pre><code>.sticky {
    position: fixed;
    top: 0;
  }
  </code></pre>
  
  <p>The header has an id of persist-wrap. This works fine on a desktop browser but not at all on a mobile browser.</p>
  
  <p>Any ideas?</p>