android设备上固定元素的延迟滚动位置

Question

我的元素在滚动> 145px时变为固定，然后在滚动<145px时变为不固定。

它在台式机上运行良好，但在移动设备上的反应似乎较慢。 在Android上，固定元素将一直固定到页面顶部，大约2秒钟的延迟，然后移动浏览器才意识到距顶部小于145像素。

如何停止延迟？

jQuery的

$(window).scroll(function () {
    if ($(this).scrollTop() > 145) {
        if ($("#latestWrapper").css('position') !== 'fixed') {
            $("#latestWrapper").css("position", "fixed");
            $("#latestWrapper").css("top", "0px");
        }
    } else {
        if ($("#AddFixedLatest").css('position') !== 'static') {
            $("#latestWrapper").css("position", "absolute");
            $("#latestWrapper").css("top", "145px");
        }
    }
}); 

的CSS

div#latestWrapper {
    height:50px;
    top:145px;
    width:100%;
    pointer-events:none;
    text-align:left;
    z-index:1;
    position:absolute;
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

帮助表示赞赏。

Answer 1

这是一个可能的解决方法。 不知道这是否行得通。 实际上，您需要调整大小，每隔几秒钟检查一次。 不知道这是否行得通。 试一试。

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
  };
})();

$(window).scroll(function () {
   delay(function(){
if ($(this).scrollTop() > 145) {
    if ($("#latestWrapper").css('position') !== 'fixed') {
        $("#latestWrapper").css("position", "fixed");
        $("#latestWrapper").css("top", "0px");
    }
} else {
    if ($("#AddFixedLatest").css('position') !== 'static') {
        $("#latestWrapper").css("position", "absolute");
        $("#latestWrapper").css("top", "145px");
    }
}
 }, 100);
});