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