Javascript 滚动时不同Android版本上的粘性菜单问题

我正在使用cordova 4和ripple emulator在我的计算机上测试我的应用程序。 我的粘性菜单有问题。 这是我的密码：

HTML:

JS:

结果是这样的：

标题位于默认位置的第一个图像：

在滚动事件后移动具有相同标题的第二个图像：

现在，ripple emulator（使用Chrome v39）上的一切都很好，无论我选择模拟什么设备，在我的HTC ONE Android v4.4.3上都没有任何变化

我在安卓4.2.2的Acer平板电脑和安卓4.2.2版本的Grand Neo三星手机上试用了相同的应用程序。 结果是这样的：

标题位于默认位置的第一个图像：

在

滚动事件后移动具有相同标题的第二个图像：


有关于如何修复它的帮助吗？
Android 4.4.3和4.2.2之间的网络视图可能有一些特殊的差异。
此外，我的应用程序也必须在苹果iOS上运行

我试图将此行添加到我的index.html：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />



但我得到了同样的结果

提前谢谢

#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;
}
...

    var sticky, scrollTop;
    var that = this;

    var scrollHandler = function(evt) {

          sticky = document.getElementById('menu'); 

          if ( that.scrollTop >= 44 ) 
          { 
              sticky.style.top = that.scrollTop + "px";
          }
          else 
          {
              sticky.style.top = "0px";
          }

    };

   that.$el.unbind("scroll");
   that.$el.bind("scroll", scrollHandler);

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />