Question

我的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>

Answer 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.

Answer 2

尝试使用</script>

关闭脚本代码

Answer 3

$("body").scrollTop()在Firefox中无效。根据{{3}}，尝试$(window).scrollTop()（this answer）：

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

为什么jQuery中的scrollTop不能在Firefox上运行？

3 个答案: