Android設備上固定元素的延遲滾動位置

Question

當滾動大於145px時，我有一個元素會變得固定，然後在滾動< 145px時變得不固定。

它在桌面上運行良好，但它似乎在移動設備上反應較慢。在Android上，固定元素一直保持固定到頁面頂部，延遲約2秒，然後移動瀏覽器意識到它距離頂部小於145px。

如何阻止延遲？

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); 
});