Question

我想在用户向下滚动到某个位置后让div保持在浏览器之上

我有类似

的东西

   $(window).scroll(function () {
       if ($(window).scrollTop() > 301) {
           $('#div').css('top', $(window).scrollTop()-277);
       }else if($(window).scrollTop() < 301){
         $('#div').css('top', 0);
       }
    });

它在桌面浏览器中运行良好。但是，它在iPad Safari中有点瑕疵。 $('#div')将'jump'置于顶部'之后'位置为＆gt; 301而不是一直保持在最佳状态。基本上，就像浏览器在用户实际滚动时忽略代码但是当用户停止滚动时，$('#div')会跳到顶部。我希望有人能帮助我解决这个问题。

非常感谢！

Answer 1

你有没有尝试过css：

#div { 
  top: 0;
  position: fixed; 
}

Answer 2

您可以在CSS中添加以下类：

#div {
   top: 0;
   left: 0;
   position: absolute;
}
#div.is-fixed {
    position: fixed;
}

然后在你的JS代码中：

$(window).scroll(function () {
   if ($(window).scrollTop() > 301) {
       $('#div').addClass("is-fixed");
   } else {
     $('#div').removeClass("is-fixed");
   }
});

这将大大简化您的代码并提高性能。

但我相信您的问题是，在iOS设备上，当用户完成用手指滚动时会触发滚动事件。你可能不得不处理触摸事件以使你的卷轴完美。

如何让元素在ipad中保持在浏览器之上

2 个答案: