在移动设备上无法使用.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

实际发现的问题是，如果我使用“ ==”，它必须是确切的文档高度，在移动设备中，视点在移动或滚动时不会触发脚本，因此我没有更改“ ==”设置为“> =”，然后在视口中添加高度。

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

在我的标题视口标签中

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

而且效果很好！