title: Sticky menu problems on different Android versions while scrolling
body: <p>I'm using cordova 4 and ripple emulator to test my app on my computer.
  I'm facing a problem with my sticky menu. 
  Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div id="menu" class="bar" &gt;
          &lt;span class="icon icon-bars"&gt; &lt;/span&gt;
          &lt;span class="icon icon-search"&gt; &lt;/span&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu {
    top: 0px; 
  }
  .bar {
    display: block;
    position: fixed;
    right: 0;
    left: 0;
    height: 44px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: white;
    border-bottom: 1px solid #ddd;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  ...
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    var sticky, scrollTop;
      var that = this;
  
      var scrollHandler = function(evt) {
  
            sticky = document.getElementById('menu'); 
  
            if ( that.scrollTop &gt;= 44 ) 
            { 
                sticky.style.top = that.scrollTop + "px";
            }
            else 
            {
                sticky.style.top = "0px";
            }
  
      };
  
     that.$el.unbind("scroll");
     that.$el.bind("scroll", scrollHandler);
  </code></pre>
  
  <p>The result is something like this:</p>
  
  <p>first image with header at default position:
  <img src="https://i.stack.imgur.com/TZ6C3.png" alt="enter image description here"></p>
  
  <p>second image with the same header moved after a scroll event:
  <img src="https://i.stack.imgur.com/9eIUq.png" alt="enter image description here"></p>
  
  <p>Now everything works fine on ripple emulator (using Chrome v39), nothing changes no matter what device I choose to emulate, and on my HTC ONE Android v4.4.3.</p>
  
  <p>I tried the same app on my Acer tablet with Android 4.2.2 and on a Grand Neo Samsung phone with same Android version 4.2.2.
  And the result is something like this:</p>
  
  <p>first image with header at default position:</p>
  
  <p><img src="https://i.stack.imgur.com/dK2sF.png" alt="enter image description here"></p>
  
  <p>second image with the same header moved after a <code>scroll</code> event:</p>
  
  <p><img src="https://i.stack.imgur.com/um1G0.png" alt="enter image description here"></p>
  
  <p>Any help about how to fix it? 
  Maybe there is some particular difference in the webview between Android 4.4.3 and 4.2.2.
  Besides my app has to work on Apple iOS too.</p>
  
  <p>I tried to add this line to my index.html:</p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" /&gt;
  </code></pre>
  
  <p>but I got same results.</p>
  
  <p>Thanks in advance!</p>