javascript - 在移动设备上使用 .scrollTop 动画不起作用

Question

当用户在页面底部向下滚动时，我会出现一个页脚，但出于某种原因，它似乎不适用于移动设备，尤其是 ipad，而且它看起来很挑剔。有时有效，有时无效，并且仅在垂直使用 ipad 时有效。

<script type="text/javascript">
var $window = jQuery(window);
var   $document = jQuery(document);
var  footer = jQuery('.footer');

footer.css({opacity: 0});

$window.on('scroll', function() {
  if (($window.scrollTop() + $window.innerHeight()) == $document.height()) {
    footer.stop(true).animate({opacity: 1}, 250);
  } 
  else {
    footer.stop(true).animate({opacity: 0}, 250);
  }
});
</script>

只是在页面底部淡入淡出。我环顾四周，似乎有几种方法可以做到这一点，我想知道最有效的解决方案。

我以为我不久前找到了一个解决方案，但似乎再也找不到这个问题了，它需要我深入挖掘。

我不太确定移动设备中的所有因素与我目前拥有的此解决方案不兼容，因此我很难确定需要调整哪些内容。谢谢。

Answer 1

实际上发现问题是，如果我使用“==”，它需要是准确的文档高度，在移动设备中，视点在移动或滚动时不会触发脚本，因此我不必更改“在我的条件下将 ==' 更改为 '>='，然后将高度添加到我的视口(viewport)中。

if (($window.scrollTop() + $window.innerHeight()) >= $document.height())

在我的标题视口(viewport)标签中

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

而且效果非常好!