Question

我有一个在滚动时固定的元素＆gt; 145px，滚动时它变得不固定＆lt; 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);
});

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

1 个答案: