title: sticky header function not well
body: <p>when scrolling down header should not be visible, just after scrolling up header will be visible. my code work for iPhone well but on other mobile devices like samsung, nexus.... it don't. while scrolling down it shows my sticky header and this what i don't want.</p>
  
  <p>any ideas how i can solve thos problem?</p>
  
  <p><strong>Snippet:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
    var lastPos = 0;
    $(window).scroll(function() {
      var pos = $(this).scrollTop();
      if (pos &gt; lastPos || pos == 0) {
        // scroll down
        $(".backButton").attr('data-position','');
      } else {
        // scroll up
        $(".backButton").attr('data-position','fixed');
      }
      lastPos = pos;  
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.backButton {
    background-color: rgba(255,255,255,0.9);
    border: 1px solid #000;
    border-width: 0 0 1px 0;
    box-sizing: border-box;
    overflow: hidden;
    text-transform: uppercase;
    z-index: 100;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    max-width: 100%;
    webkit-transform: translate3D(0, 0, 0);
    -ms-transform: translate3D(0, 0, 0);
    transform: translate3D(0, 0, 0);
  }
  
  .backButton[data-position=fixed] {
    left: 16px;
    position: fixed;
    right: 16px;
    top: 0px;
    width: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="backButton"&gt;
    &lt;a href="#" class="backLink"&gt;BACK&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>