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

Question

我有一个元素在滚动 > 145px 时变得固定，然后在滚动 <145px 时变得不固定。

它在台式机上运行良好，但在移动设备上似乎 react 较慢。在 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);
});