为什么 jQuery 中的 scrollTop 在 Firefox 上不起作用？ [复制]答案

【问题标题】：Why the scrollTop in jQuery doesn't work on Firefox? [duplicate]为什么 jQuery 中的 scrollTop 在 Firefox 上不起作用？ [复制]
【发布时间】：2014-07-23 04:16:04
【问题描述】：

我的 html 文件的标题中有这个。代码的目的是让元素 (#hello) 在用户滚动页面时淡出。这在 Chrome、Safari 和 Opera 中按预期工作，但淡入淡出在 Firefox 中不起作用。任何人都知道是什么阻止它在所有浏览器中以相同的方式执行？

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {
        $(window).scroll(function() {
            var scrollFromTop = $("body").scrollTop();
            $("#hello").css("opacity", 1.5-scrollFromTop/250);
        });
    });
</script>

【问题讨论】：

什么版本的火狐？您可能必须使用 -moz- 前缀。参考文献：css-tricks.com caniuse.com
你能做一个jsfiddle示例吗？
火狐30.0。 -moz- 前缀适用于更旧的版本，对吗？
你能检查浏览器控制台是否有错误吗？
@mdurban 实际上是的，这是一个非常有效的观点。我认为 opacity 已经得到了 Firefox 0.9+ 的支持，所以应该没问题...

标签： javascript jquery html firefox

【解决方案1】：

使用：$(document).scrollTop();

scrollTop() returns 0 in Firefox, but not in Chrome

像这样：

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(function() {
        $(window).scroll(function() {
            var scrollFromTop = $(document).scrollTop();
            $("#hello").css("opacity", 1.5-scrollFromTop/250);
        });
    });
</script>

Live demo.

【讨论】：

谢谢你！现在完美运行。

【解决方案2】：

尝试用</script>关闭你的脚本标签

【讨论】：

对不起，它已关闭。我无法让 SO 的编辑不删掉它

【解决方案3】：

$("body").scrollTop() 在 Firefox 中不起作用。根据this answer，试试$(window).scrollTop() (see jsfiddle here)：

$(function() {
   $(window).scroll(function() {
      var scrollFromTop = $(window).scrollTop();
      $('#hello').html(scrollFromTop);
      $("#hello").css("opacity", 1.5-(scrollFromTop/250));
   });
});

【讨论】：